@aquera/nile-visualization 2.9.4 → 2.9.6

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,10 @@ 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-md, var(--ng-spacing-2)) var(--nile-spacing-xl, var(--ng-spacing-4));
     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-weight: 400;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.4;
     box-sizing: border-box;
@@ -602,18 +606,14 @@ export const styles = css `
     color: transparent;
   }
 
-  /* ── Custom suggestion dropdown ─── */
-  /* Hidden by default; shown only when fc-prompt__inner has focus-within.*/
-  /* Mousedown on a suggestion preventDefaults to keep input focus, so    */
-  /* the dropdown stays open across picks. Click outside → focus-within   */
-  /* fails → dropdown hides.                                              */
-  .fc-prompt__suggestions {
-    display: none;
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0;
-    right: 0;
-    z-index: 20;
+  .fc-prompt__dropdown {
+    flex: 1;
+    min-width: 0;
+    display: block;
+  }
+
+  .fc-prompt__dropdown::part(panel) {
+    display: flex;
     flex-direction: column;
     max-height: 280px;
     overflow-y: auto;
@@ -625,10 +625,6 @@ export const styles = css `
     padding: var(--nile-spacing-4px, var(--ng-spacing-1));
   }
 
-  .fc-prompt__inner:focus-within .fc-prompt__suggestions {
-    display: flex;
-  }
-
   .fc-prompt__suggestion {
     display: flex;
     align-items: center;

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. */
@@ -15,6 +18,9 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     promptModes: Map<string, PromptMode>;
     /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
     promptActiveIndex: Map<string, number>;
+    /** Id of the prompt control whose input currently has focus (drives the
+     *  nile-dropdown panel open state). null when no prompt is focused. */
+    promptFocusedId: string | null;
     /** Active typewriter timers per prompt control id (so we can stop them). */
     private _promptTimers;
     /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
@@ -30,6 +36,7 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    private _syncPortalDropdowns;
     setValue(id: string, value: unknown): void;
     /**
      * Update a prompt control's value. The value lands in `selectedValues`
@@ -52,6 +59,7 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
      */
     submitPrompt(ctrl: NormalizedFilterControl): void;
     setPromptActiveIndex(id: string, idx: number): void;
+    setPromptFocused(id: string, focused: boolean): void;
     private _validateOrClear;
     private _clearPromptValidation;
     private _syncPromptAnimations;

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. */
@@ -31,6 +34,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         this.promptModes = new Map();
         /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
         this.promptActiveIndex = new Map();
+        /** Id of the prompt control whose input currently has focus (drives the
+         *  nile-dropdown panel open state). null when no prompt is focused. */
+        this.promptFocusedId = null;
         /** Active typewriter timers per prompt control id (so we can stop them). */
         this._promptTimers = new Map();
         /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
@@ -66,6 +72,20 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             this._initValues();
             this._syncPromptAnimations();
         }
+        // Keep portaled suggestion panels in sync with the latest panel content.
+        // nile-dropdown clones the panel once at open-time and never re-clones,
+        // so without this the suggestions appear frozen at the value they had
+        // when the dropdown first opened.
+        this._syncPortalDropdowns();
+    }
+    _syncPortalDropdowns() {
+        const dropdowns = this.shadowRoot?.querySelectorAll('nile-dropdown.fc-prompt__dropdown');
+        dropdowns?.forEach((dd) => {
+            const d = dd;
+            if (d.open && d.portal && d.portalManager?.clonedPanel) {
+                d.portalManager.updatePortalPanel?.();
+            }
+        });
     }
     // ── FilterChartHost surface ─────────────────────────────────────────────────
     setValue(id, value) {
@@ -124,6 +144,14 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     setPromptActiveIndex(id, idx) {
         this.promptActiveIndex = new Map(this.promptActiveIndex).set(id, idx);
     }
+    setPromptFocused(id, focused) {
+        if (focused) {
+            this.promptFocusedId = id;
+        }
+        else if (this.promptFocusedId === id) {
+            this.promptFocusedId = null;
+        }
+    }
     _validateOrClear(ctrl, value, opts = {}) {
         const isNql = this.promptModes.get(ctrl.id) === 'nql';
         if (value.trim() === '') {
@@ -468,10 +496,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 +570,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);
@@ -559,6 +591,9 @@ __decorate([
 __decorate([
     state()
 ], NileFilterChart.prototype, "promptActiveIndex", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptFocusedId", void 0);
 NileFilterChart = NileFilterChart_1 = __decorate([
     customElement('nile-filter-chart')
 ], NileFilterChart);

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

@@ -264,7 +264,42 @@ function renderModeToggle(host, ctrl, mode) {
     </nile-button-toggle-group>
   `;
 }
+/**
+ * Layout-only global stylesheet for the portaled suggestion menu. The portal
+ * clones the panel into document.body, so component-scoped CSS can't reach
+ * it — these two rules use nile-menu-item's exposed `label` part to grow the
+ * label so the suffix (type pill) sticks to the row's right edge, and style
+ * the pill itself. Idempotent: bails if already injected.
+ */
+const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout';
+function ensureSuggestionLayoutStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(SUGGESTION_LAYOUT_STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = SUGGESTION_LAYOUT_STYLE_ID;
+    el.textContent = `
+    .fc-prompt__menu nile-menu-item::part(label) {
+      flex: 1;
+      min-width: 0;
+    }
+    .fc-prompt__suggestion-tag {
+      flex-shrink: 0;
+      padding: 1px 8px;
+      border-radius: 999px;
+      background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+      color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+  `;
+    document.head.appendChild(el);
+}
 export function renderPrompt(host, ctrl) {
+    ensureSuggestionLayoutStyles();
     const value = String(host.selectedValues.get(ctrl.id) ?? '');
     const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
     const error = host.promptErrors.get(ctrl.id);
@@ -608,60 +643,101 @@ export function renderPrompt(host, ctrl) {
         ctrl.noAiBorder ? 'fc-prompt--no-ai-border' : '',
         error ? 'fc-prompt--error' : '',
     ].filter(Boolean).join(' ');
+    const onFocus = () => host.setPromptFocused(ctrl.id, true);
+    // Don't close on blur if focus moved into the suggestion menu (or its
+    // portaled clone) — mousedown on a nile-menu-item momentarily shifts focus
+    // because of the menu's roving tab-index. We let nile-dropdown's own
+    // outside-click / Tab / Escape handlers close the panel.
+    const onBlur = (e) => {
+        const rel = e.relatedTarget;
+        if (rel) {
+            if (rel.closest('nile-menu-item'))
+                return;
+            if (rel.closest('nile-menu'))
+                return;
+            if (rel.closest('nile-dropdown'))
+                return;
+            if (rel.closest('.nile-dropdown-portal-append'))
+                return;
+        }
+        host.setPromptFocused(ctrl.id, false);
+    };
+    const isFocused = host.promptFocusedId === ctrl.id;
+    const dropdownOpen = isFiltrexMode && isFocused && suggestionData.length > 0;
     return html `
     <div class="fc-prompt-row">
       <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
         <div class="fc-prompt__inner">
-          <div class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}" part="filter-prompt-field">
-            ${isFiltrexMode ? html `
-              <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
+          <nile-dropdown
+            class="fc-prompt__dropdown"
+            placement="bottom-start"
+            sync="width"
+            distance="6"
+            hoist
+            portal
+            stay-open-on-select
+            ?open=${dropdownOpen}
+            .noOpenOnClick=${true}
+          >
+            <div
+              slot="trigger"
+              class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}"
+              part="filter-prompt-field"
+            >
+              ${isFiltrexMode ? html `
+                <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
         const color = TOKEN_COLOR[tok.type] ?? 'inherit';
         return html `<span style="color:${color};${tok.type === 'keyword' ? 'font-weight:600;' : ''}">${tok.text}</span>`;
     })}</div>
-            ` : nothing}
-            <input
-              type="text"
-              class="fc-prompt__input"
-              id="fc-prompt-${ctrl.id}"
-              name="${ctrl.id}"
-              part="filter-prompt-input"
-              autocomplete="off"
-              spellcheck="false"
-              aria-invalid="${error ? 'true' : 'false'}"
-              placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
-              .value="${value}"
-              @input="${onInput}"
-              @keydown="${onKeyDown}"
-              @scroll="${onScroll}"
-            />
-          </div>
-          ${isFiltrexMode && suggestionData.length > 0 ? html `
-            <div class="fc-prompt__suggestions" part="filter-prompt-suggestions">
-              ${suggestionData.map((item, idx) => html `
-                <button
-                  type="button"
-                  class="fc-prompt__suggestion${idx === activeIdx ? ' fc-prompt__suggestion--active' : ''}"
-                  @mouseenter="${() => {
-        if (idx !== activeIdx)
-            host.setPromptActiveIndex(ctrl.id, idx);
-    }}"
-                  @mousedown="${(e) => {
-        // Prevent focus loss on the input so we can update its
-        // value imperatively after the merge.
-        e.preventDefault();
-        const inputEl = e.currentTarget
-            .closest('.fc-prompt__inner')
-            ?.querySelector('input.fc-prompt__input');
+              ` : nothing}
+              <input
+                type="text"
+                class="fc-prompt__input"
+                id="fc-prompt-${ctrl.id}"
+                name="${ctrl.id}"
+                part="filter-prompt-input"
+                autocomplete="off"
+                spellcheck="false"
+                aria-invalid="${error ? 'true' : 'false'}"
+                placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
+                .value="${value}"
+                @input="${onInput}"
+                @keydown="${onKeyDown}"
+                @scroll="${onScroll}"
+                @focus="${onFocus}"
+                @blur="${onBlur}"
+              />
+            </div>
+            ${isFiltrexMode && suggestionData.length > 0 ? html `
+              <nile-menu
+                class="fc-prompt__menu"
+                @nile-select="${(e) => {
+        const idx = Number(e.detail?.value);
+        const item = suggestionData[idx];
+        if (!item)
+            return;
+        const inputId = `fc-prompt-${ctrl.id}`;
+        const root = e.currentTarget.getRootNode();
+        const inputEl = (root.querySelector(`#${CSS.escape(inputId)}`)
+            ?? document.getElementById(inputId));
         if (inputEl)
             pickItem(item, inputEl);
     }}"
-                >
-                  <span class="fc-prompt__suggestion-label">${item.label}</span>
-                  ${item.type ? html `<span class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
-                </button>
-              `)}
-            </div>
-          ` : nothing}
+              >
+                ${suggestionData.map((item, idx) => html `
+                  <nile-menu-item
+                    class="fc-prompt__suggestion"
+                    part="filter-prompt-suggestion${idx === activeIdx ? ' filter-prompt-suggestion-active' : ''}"
+                    value="${idx}"
+                    ?active="${idx === activeIdx}"
+                  >
+                    ${item.label}
+                    ${item.type ? html `<span slot="suffix" class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
+                  </nile-menu-item>
+                `)}
+              </nile-menu>
+            ` : nothing}
+          </nile-dropdown>
           ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
         </div>
         ${error ? html `

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

@@ -321,6 +321,8 @@ export interface FilterChartHost {
     readonly promptModes: Map<string, PromptMode>;
     /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
     readonly promptActiveIndex: Map<string, number>;
+    /** Id of the focused prompt control (drives the suggestion dropdown's open state). */
+    readonly promptFocusedId: string | null;
     setValue(id: string, value: unknown): void;
     emit(name: string, detail?: unknown): void;
     /** Update a prompt's value and (when in NQL mode) re-validate it. */
@@ -331,4 +333,6 @@ export interface FilterChartHost {
     submitPrompt(ctrl: NormalizedFilterControl): void;
     /** Set the highlighted suggestion index. Use -1 to clear the highlight. */
     setPromptActiveIndex(id: string, idx: number): void;
+    /** Mark a prompt control's input as focused / unfocused. */
+    setPromptFocused(id: string, focused: boolean): void;
 }

package/package.json

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