@aquera/nile-visualization 2.9.7 → 2.9.9

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

@@ -5,7 +5,7 @@ export const styles = css `
   .fc-root {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-none, var(--ng-spacing-0));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   /* ── Group ─── */
@@ -19,10 +19,10 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-2xl, var(--ng-spacing-5));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
     border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    gap: var(--nile-spacing-8px, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .fc-group__header--collapsible {
@@ -37,11 +37,11 @@ export const styles = css `
   .fc-group__header-text {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-2px, var(--ng-spacing-0-5));
+    gap: var(--nile-spacing-2px, var(--ng-spacing-xxs));
   }
 
   .fc-group__label {
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     letter-spacing: 0.02em;
@@ -55,7 +55,7 @@ export const styles = css `
 
   .fc-group__chevron {
     font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
-    font-weight: var(--ng-font-weight-300, 300);
+    font-weight: var(ng-font-weight-regular);
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
     transition: transform 0.2s ease;
     transform: rotate(0deg);
@@ -79,50 +79,53 @@ export const styles = css `
     border-bottom: none;
   }
 
-  /* ── Control card ─── */
   .fc-control {
-    padding: var(--nile-spacing-xl, var(--ng-spacing-4)) var(--nile-spacing-2xl, var(--ng-spacing-5));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+  }
+
+  :host([appearance="minimal"]) .fc-control {
+    padding: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
   .fc-control__label {
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
     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));
+    padding-top: var(--nile-spacing-2px, var(--ng-spacing-xxs));
+    margin-bottom: var(--nile-spacing-4px, var(--ng-spacing-xs));
     overflow: visible;
   }
 
   .fc-control__desc {
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
-    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-3));
+    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
     line-height: 1.4;
   }
 
   .fc-control__body {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-8px, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   /* ── Badge ─── */
   .fc-badge-group {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
   .fc-badge {
     display: inline-flex;
     align-items: center;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
-    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-xs)) var(--nile-spacing-14px, var(--ng-spacing-lg-alt));
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
     cursor: pointer;
     border: 1.5px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
@@ -147,20 +150,20 @@ export const styles = css `
   .fc-badge--selected .fc-dot { border-color: var(--nile-colors-white-500, var(--ng-color-graydarkmodealpha-500)); }
 
   .fc-dot {
-    width: var(--nile-spacing-8px, var(--ng-spacing-2));
-    height: var(--nile-spacing-8px, var(--ng-spacing-2));
+    width: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-spacing-md, var(--ng-spacing-md));
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
     flex-shrink: 0;
     border: 1.5px solid var(--nile-colors-transparent, var(--ng-color-base-transparent));
   }
 
   /* ── Slider ─── */
-  .fc-slider-wrap { display: flex; flex-direction: column; gap: var(--nile-spacing-10px, var(--ng-spacing-2-5)); }
+  .fc-slider-wrap { display: flex; flex-direction: column; gap: var(--nile-spacing-10px, var(--ng-spacing-md-alt)); }
 
   .fc-slider-label {
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
   }
 
@@ -173,7 +176,7 @@ export const styles = css `
 
   nile-slider::part(base) {
     height: auto;
-    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-none, var(--ng-spacing-0));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-xs)) var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   nile-slider::part(range-container) {
@@ -182,31 +185,25 @@ export const styles = css `
     min-width: 0;
   }
 
-  /* Make the track fill the container and be easier to see */
   nile-slider::part(range) {
     width: 100%;
-    height: var(--nile-height-6px, var(--ng-spacing-1-5));
+    height: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
-  /* The filled portion between the two handles */
   nile-slider::part(range-completed) {
     background-color: var(--nile-colors-primary-600, var(--ng-color-bluedark-600));
     height: 100%;
   }
 
-  /* ── Tree ─── */
-  /* nile-tree sets font-size:0 on :host for em-based indentation maths.
-     Without --nile-type-scale-4 defined the label inherits 0 and becomes invisible.
-     We also enable indent guide lines and fix the indent step size. */
   nile-tree {
-    --nile-type-scale-4: var(--nile-font-size-sm, 13px);
+    --nile-type-scale-4: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --indent-size: 0.875rem;
     --indent-guide-width: 1px;
     --indent-guide-style: solid;
     --indent-guide-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
-  /* ── Segmented ─── */
+
   .fc-segmented-scroll {
     overflow-x: auto;
     overflow-y: hidden;
@@ -222,19 +219,18 @@ export const styles = css `
     min-width: max-content;
   }
 
-  /* ── Toggle ─── */
+
   .fc-toggle-group {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    gap: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
   }
 
 
-  /* ── Comparison ─── */
   .fc-comparison {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    gap: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
   }
 
   .fc-comparison nile-select { flex: 1; }
@@ -246,7 +242,7 @@ export const styles = css `
     color: var(--nile-colors-white-base, var(--ng-color-base-white));
     background: var(--nile-colors-neutral-700, var(--ng-color-graylightmode-700));
     border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
-    padding: 3px var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    padding: 3px var(--nile-spacing-6px, var(--ng-spacing-sm));
     letter-spacing: 0.05em;
   }
 
@@ -254,26 +250,26 @@ export const styles = css `
   .fc-threshold {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-3));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .fc-threshold-metric-row {
     display: flex;
     align-items: flex-end;
-    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    gap: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
   }
 
   .fc-threshold-cond-row {
     display: flex;
     align-items: flex-end;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-3));
-    padding-left: var(--nile-spacing-4px, var(--ng-spacing-1));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-left: var(--nile-spacing-4px, var(--ng-spacing-xs));
   }
 
   .fc-threshold-field {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
   .fc-threshold-field-label {
@@ -291,25 +287,25 @@ export const styles = css `
   .fc-threshold-where {
     flex-shrink: 0;
     align-self: flex-end;
-    margin-bottom: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    margin-bottom: var(--nile-spacing-6px, var(--ng-spacing-sm));
     font-size: 11px;
     font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
     letter-spacing: 0.06em;
     color: var(--nile-colors-white-base, var(--ng-color-base-white));
     background: var(--nile-colors-dark-500, var(--ng-color-graylightmode-600));
     border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
-    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-xs)) var(--nile-spacing-10px, var(--ng-spacing-md-alt));
   }
 
   .fc-threshold-preview {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
-    padding: var(--nile-spacing-8px, var(--ng-spacing-2)) var(--nile-spacing-lg, var(--ng-spacing-3));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
     background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
     border: 1px solid var(--nile-colors-primary-400, var(--ng-color-bluedark-200));
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
     font-family: monospace;
   }
@@ -326,18 +322,18 @@ export const styles = css `
   .fc-preset-list {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
   .fc-preset-item {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
-    padding: var(--nile-spacing-10px, var(--ng-spacing-2-5)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    gap: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
+    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg-alt));
     border-radius: var(--nile-radius-md, var(--ng-radius-md));
     border: 1.5px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     background: var(--nile-colors-white-base, var(--ng-color-base-white));
-    font-size: var(--nile-font-size-sm, 13px);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     cursor: pointer;
@@ -372,22 +368,22 @@ export const styles = css `
       --fc-prompt-gradient,
       linear-gradient(
         90deg,
-        #2563eb 0%,
-        #3b82f6 18%,
-        #06b6d4 36%,
-        #6366f1 54%,
-        #8b5cf6 72%,
-        #2563eb 100%
+        var(--ng-color-blue-600) 0%,
+        var(--ng-color-blue-500) 18%,
+        var(--ng-color-cyan-500) 36%,
+        var(--ng-color-indigo-500) 54%,
+        var(--ng-color-violet-500) 72%,
+        var(--ng-color-blue-600) 100%
       )
     );
     background-size: 300% 100%;
     animation: fc-prompt-gradient var(--fc-prompt-gradient-speed, 4.5s) linear infinite;
-    box-shadow: 0 6px 6px -6px rgba(59, 130, 246, 0.45);
+    box-shadow: 0 6px 6px -6px color-mix(in srgb, var(--ng-color-blue-500) 45%, transparent);
   }
 
 
   .fc-prompt:focus-within {
-    box-shadow: 0 8px 8px -6px rgba(59, 130, 246, 0.6);
+    box-shadow: 0 8px 8px -6px color-mix(in srgb, var(--ng-color-blue-500) 60%, transparent);
   }
 
   .fc-prompt--no-ai-border {
@@ -404,11 +400,7 @@ export const styles = css `
   .fc-prompt--no-ai-border .fc-prompt__inner {
     border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
-
-  /* ── Error state ─── */
-  /* Drop the animated AI gradient and the 2px outer ring; the error reads
-     as a thin red border directly on the input with a soft focus halo,
-     and a quiet inline message underneath — no heavy box. */
+ 
   .fc-prompt--error {
     padding: 0;
     background: transparent;
@@ -421,23 +413,23 @@ export const styles = css `
   }
 
   .fc-prompt--error .fc-prompt__inner {
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #fff));
-    border: 1.5px solid var(--nile-colors-error-500, var(--ng-colors-border-error, #f04438));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1.5px solid var(--ng-colors-border-error);
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
   }
 
   .fc-prompt--error:focus-within .fc-prompt__inner {
-    border-color: var(--nile-colors-error-600, var(--ng-colors-border-error-strong, #d92d20));
+    border-color: var(--ng-colors-border-error-strong);
     box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.14);
   }
 
   .fc-prompt__error {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
-    margin-top: var(--nile-spacing-6px, var(--ng-spacing-1-5));
-    padding: 0 var(--nile-spacing-2px, var(--ng-spacing-0-5));
-    color: var(--nile-colors-error-600, var(--ng-colors-text-error-primary-600, #d92d20));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    margin-top: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    padding: 0 var(--nile-spacing-2px, var(--ng-spacing-xxs));
+    color: var(--ng-colors-text-error-primary-600);
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     line-height: 1.4;
     animation: fc-prompt-error-in 0.18s ease-out both;
@@ -450,7 +442,7 @@ export const styles = css `
     width: 14px;
     height: 14px;
     border-radius: 50%;
-    background: var(--nile-colors-error-500, var(--ng-colors-bg-error-solid, #f04438));
+    background: var(--ng-colors-bg-error-solid);
     color: var(--nile-colors-white-base, var(--ng-color-base-white));
     font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
     font-size: 10px;
@@ -476,9 +468,8 @@ export const styles = css `
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
-    padding-right: var(--nile-spacing-md, var(--ng-spacing-2));
-    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+    padding-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
@@ -490,7 +481,7 @@ export const styles = css `
     outline: none;
     background: transparent;
     border-radius: inherit;
-    padding: var(--nile-spacing-md, var(--ng-spacing-2)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     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;
@@ -506,17 +497,17 @@ export const styles = css `
   .fc-prompt__mode {
     flex-shrink: 0;
     align-self: center;
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));
-    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    border-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
     overflow: hidden;
   }
 
   .fc-prompt__mode nile-button-toggle::part(base) {
     height: 32px;
-    padding: 0 var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: 0 var(--nile-spacing-xl, var(--ng-spacing-xl));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     letter-spacing: 0.03em;
-    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
   }
 
   .fc-prompt__mode-icon {
@@ -525,12 +516,35 @@ export const styles = css `
     line-height: 0;
   }
 
+  /* Compact glyph fallback for the mode toggle — hidden at wide widths;
+     swapped in for the text label when the prompt row becomes narrow
+     (see container query below). */
+  .fc-prompt__mode-glyph {
+    display: none;
+    align-items: center;
+    line-height: 0;
+  }
+
   /* ── Row layout: prompt input + mode toggle ─── */
   .fc-prompt-row {
     display: flex;
-    align-items: stretch;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    align-items: flex-start;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     width: 100%;
+    container-type: inline-size;
+    container-name: fc-prompt-row;
+  }
+
+  /* Narrow filter bar: collapse the Prompt / Expression toggle to a
+     single glyph per segment so it fits without wrapping. */
+  @container fc-prompt-row (max-width: 480px) {
+    .fc-prompt__mode-label { display: none; }
+    .fc-prompt__mode-icon  { display: none; }
+    .fc-prompt__mode-glyph { display: inline-flex; }
+    .fc-prompt__mode nile-button-toggle::part(base) {
+      padding: 0 var(--nile-spacing-md, var(--ng-spacing-md));
+      gap: 0;
+    }
   }
 
   .fc-prompt-row .fc-prompt--row-input {
@@ -539,13 +553,13 @@ export const styles = css `
   }
 
   .fc-prompt__mode nile-button-toggle:first-of-type::part(base) {
-    border-top-left-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
-    border-bottom-left-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    border-top-left-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
+    border-bottom-left-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
   }
 
   .fc-prompt__mode nile-button-toggle:last-of-type::part(base) {
-    border-top-right-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
-    border-bottom-right-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    border-top-right-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
+    border-bottom-right-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
   }
 
   /* ── Field wrapper + syntax-highlight overlay ─── */
@@ -559,12 +573,22 @@ export const styles = css `
     position: relative;
     flex: 1;
     min-width: 0;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    width: 100%;
+  }
+  .fc-prompt__field-input {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
   }
   .fc-prompt__field--highlight .fc-prompt__highlight,
   .fc-prompt__field--highlight .fc-prompt__input {
     box-sizing: border-box;
-    padding: var(--nile-spacing-md, var(--ng-spacing-2)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     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;
@@ -573,21 +597,24 @@ export const styles = css `
     white-space: pre;
   }
 
+  .fc-prompt__field--highlight .fc-prompt__highlight {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .fc-prompt__highlight {
     position: absolute;
-    inset: 0;
+    top: 0;
+    bottom: 0;
+    left: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    right: var(--nile-spacing-xl, var(--ng-spacing-xl));
     pointer-events: none;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    /* overflow-x: auto (not hidden) so JS can sync scrollLeft to the input's
-       native horizontal scroll. Without it, white-space: pre content spills
-       past the field's right edge and visually overlaps the mode toggle.
-       Scrollbar is suppressed since the overlay is non-interactive (only the
-       input below it scrolls via keyboard). */
     overflow-x: auto;
     overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
+    scrollbar-width: none; 
   }
-  .fc-prompt__highlight::-webkit-scrollbar { display: none; } /* Chrome / Safari */
+  .fc-prompt__highlight::-webkit-scrollbar { display: none; } 
 
   .fc-prompt__input {
     position: relative;
@@ -606,12 +633,35 @@ export const styles = css `
     color: transparent;
   }
 
+  .fc-prompt__field--highlight .fc-prompt__input::selection {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: transparent;
+  }
+  .fc-prompt__field--highlight .fc-prompt__input::-moz-selection {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: transparent;
+  }
+
   .fc-prompt__dropdown {
     flex: 1;
     min-width: 0;
     display: block;
   }
 
+  .fc-prompt__inner > .fc-prompt__dropdown {
+    display: block;
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+  .fc-prompt__inner > .fc-prompt__dropdown > [slot="trigger"] {
+    width: 100%;
+  }
+  .fc-prompt__inner > .fc-prompt__dropdown::part(trigger) {
+    display: block;
+    width: 100%;
+  }
+
   .fc-prompt__dropdown::part(panel) {
     display: flex;
     flex-direction: column;
@@ -622,18 +672,18 @@ export const styles = css `
     border-radius: var(--nile-radius-md, var(--ng-radius-md));
     box-shadow: 0 12px 24px -8px rgba(16, 24, 40, 0.12),
                 0 4px 8px -2px rgba(16, 24, 40, 0.06);
-    padding: var(--nile-spacing-4px, var(--ng-spacing-1));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-xs));
   }
 
   .fc-prompt__suggestion {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     width: 100%;
-    padding: var(--nile-spacing-8px, var(--ng-spacing-2)) var(--nile-spacing-md, var(--ng-spacing-2));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-md, var(--ng-spacing-md));
     border: 0;
-    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
     background: transparent;
     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));
@@ -647,20 +697,19 @@ export const styles = css `
   .fc-prompt__suggestion:hover {
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
-  /* Keyboard-highlighted state — distinct from hover via brand-tinted bg
-     and a left accent bar so it's obvious which row Enter will select. */
+
   .fc-prompt__suggestion--active,
   .fc-prompt__suggestion--active:hover {
-    background: var(--nile-colors-blue-50, var(--ng-colors-bg-brand-secondary, #eff6ff));
-    box-shadow: inset 3px 0 0 var(--nile-colors-blue-500, var(--ng-colors-bg-brand-solid, #3b82f6));
+    background: var(--ng-colors-bg-brand-secondary);
+    box-shadow: inset 3px 0 0 var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
   }
 
   .fc-prompt__suggestion-label {
     flex: 1;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
   }
 
   .fc-prompt__suggestion-tag {
@@ -676,10 +725,38 @@ export const styles = css `
   }
 
   .fc-prompt__input::placeholder {
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     opacity: 0.85;
   }
 
+  /* ── Clear icon — nile-button variant="ghost" sibling of the input. ─── */
+  .fc-prompt__clear-icon {
+    flex-shrink: 0;
+    margin-right: var(--nile-spacing-6px, var(--ng-spacing-sm));
+    line-height: 0;
+  }
+
+  /* nile-button is 40px tall by default; compress it to a 24x24 circle so it
+     fits inside the prompt's row. ::part(base) reaches into its shadow root. */
+  .fc-prompt__clear-icon::part(base) {
+    height: 24px;
+    width: 24px;
+    min-height: 0;
+    padding: 0;
+    border-radius: 50%;
+    gap: 0;
+    background: transparent;
+  }
+
+  .fc-prompt__clear-icon::part(base):hover,
+  .fc-prompt__clear-icon::part(base):focus-visible {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
+
+  .fc-prompt__clear-filter {
+    flex-shrink: 0;
+  }
+
   @keyframes fc-prompt-gradient {
     0%   { background-position:   0% 50%; }
     100% { background-position: 300% 50%; }