rich-input 1.2.2 → 1.4.0

package/components/rich-input.js

@@ -3,11 +3,13 @@
  * Keyword-based autocomplete input field powered by OpaqueRange and Custom Highlight API.
  */
 
-import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion, isDatalistValue } from '../utils/query-parser.js';
+import { DEFAULT_OPERATORS, normalizeOperators, DEFAULT_COMBINATORS, normalizeCombinators, DEFAULT_DELIMITERS, normalizeDelimiters, parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion, isDatalistValue } from '../utils/query-parser.js';
 import { highlightManager, isOpaqueRangeSupported, isHighlightSupported } from '../utils/highlights.js';
 import { getCaretCoordinates, positionPopover } from '../utils/positioning.js';
 import { setupContentEditableAdapter, isContentEditableFallbackActive } from '../utils/contenteditable-adapter.js';
 
+const KEYWORD_SUGGESTION_DELAY = 300;
+
 const TEMPLATE = document.createElement('template');
 TEMPLATE.innerHTML = `
 <style>
@@ -57,25 +59,35 @@ TEMPLATE.innerHTML = `
     cursor: not-allowed;
   }
 
-  slot[name="leading"] {
+  .search-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
     margin-right: 0.5rem;
     color: var(--ri-icon-color, var(--rs-icon-color, #9ca3af));
+    background-image: var(--_icon-default-bg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E"));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    font-size: 1rem;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
   }
 
-  .search-icon {
-    width: 1.125rem;
-    height: 1.125rem;
-    color: inherit;
-    pointer-events: none;
+  .search-icon[data-has-content] {
+    background-image: none;
   }
 
-  ::slotted([slot="trailing"]) {
-    flex-shrink: 0;
-    margin-left: 0.375rem;
+  .search-icon[data-content-none] {
+    display: none;
+  }
+
+  .search-icon::before {
+    content: var(--_icon-content, none);
   }
 
   .search-input {
@@ -113,14 +125,32 @@ TEMPLATE.innerHTML = `
     display: inline-block;
   }
 
+  /* Generic prefix highlight for operators */
+  :host::highlight(rich-input-operator) {
+    color: var(--ri-operator-color, var(--ri-keyword-color, #64748b));
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Generic highlight for combinators */
+  :host::highlight(rich-input-combinator) {
+    color: var(--ri-combinator-color, var(--ri-operator-color, var(--ri-keyword-color, #64748b)));
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Generic highlight for delimiters */
+  :host::highlight(rich-input-delimiter) {
+    color: var(--ri-delimiter-color, var(--ri-operator-color, var(--ri-keyword-color, #64748b)));
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+  }
+
   /* Generic prefix highlight for keywords */
-  ::highlight(rich-input-keyword) {
+  :host::highlight(rich-input-keyword) {
     color: var(--ri-keyword-color, #64748b);
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
   }
 
   /* Squiggly line underneath invalid keyword values */
-  ::highlight(rich-input-invalid) {
+  :host::highlight(rich-input-invalid) {
     text-decoration: underline wavy var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
     -webkit-text-decoration: underline wavy var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
     text-decoration-line: underline;
@@ -132,12 +162,6 @@ TEMPLATE.innerHTML = `
     text-decoration-skip-ink: none;
   }
 
-  /* Visually hide datalists and custom style tags in slot */
-  ::slotted(datalist),
-  ::slotted(style) {
-    display: none !important;
-  }
-
   .clear-button {
     flex-shrink: 0;
     display: inline-flex;
@@ -180,6 +204,7 @@ TEMPLATE.innerHTML = `
     max-height: 290px;
     overflow-y: auto;
     background-color: var(--ri-popover-bg, var(--rs-popover-bg, #ffffff));
+    color: var(--ri-item-title-color, var(--rs-item-title-color, #0f172a));
     border: 1px solid var(--ri-popover-border, var(--rs-popover-border, #e2e8f0));
     border-radius: var(--ri-popover-radius, var(--rs-popover-radius, 8px));
     box-shadow: var(--ri-popover-shadow, var(--rs-popover-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)));
@@ -221,7 +246,11 @@ TEMPLATE.innerHTML = `
     line-height: 1.4;
     transition: background-color 0.1s ease;
     user-select: none;
-    color: var(--ri-item-title-color, var(--rs-item-title-color, #0f172a));
+    color: var(--ri-item-title-color, var(--rs-item-title-color, inherit));
+  }
+
+  .suggestion-item.selected {
+    background-color: var(--ri-item-selected-bg, rgba(37, 99, 235, 0.06));
   }
 
   .suggestion-item:hover,
@@ -239,7 +268,7 @@ TEMPLATE.innerHTML = `
 
   .suggestion-title {
     font-weight: 600;
-    color: var(--ri-item-title-color, var(--rs-item-title-color, #0f172a));
+    color: var(--ri-item-title-color, var(--rs-item-title-color, inherit));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -260,19 +289,16 @@ TEMPLATE.innerHTML = `
     vertical-align: middle;
   }
 
-  /* Visually hide datalists in slot */
-  ::slotted(datalist) {
+  /* Visually hide datalists and custom style tags in slot */
+  ::slotted(datalist),
+  ::slotted(style) {
     display: none !important;
   }
 </style>
 
 <div part="wrapper" class="wrapper">
   <div part="control" class="control">
-    <slot name="leading">
-      <svg part="icon" class="search-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
-      </svg>
-    </slot>
+    <span part="icon" class="search-icon" aria-hidden="true"></span>
     <input
       part="input"
       class="search-input"
@@ -290,7 +316,6 @@ TEMPLATE.innerHTML = `
         <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
       </svg>
     </button>
-    <slot name="trailing"></slot>
   </div>
 
   <div
@@ -356,6 +381,79 @@ function syncDocumentHighlightStyles(shadowRoot) {
 export class RichInput extends HTMLElement {
   static formAssociated = true;
 
+  static _globalOperators = [...DEFAULT_OPERATORS];
+  static _globalCombinators = [...DEFAULT_COMBINATORS];
+  static _globalDelimiters = [...DEFAULT_DELIMITERS];
+
+  /**
+   * Global default operators inherited by newly created <rich-input> instances.
+   */
+  static get operators() {
+    return [...RichInput._globalOperators];
+  }
+
+  static set operators(val) {
+    if (val === null || val === undefined) {
+      RichInput._globalOperators = [...DEFAULT_OPERATORS];
+    } else {
+      RichInput._globalOperators = normalizeOperators(val);
+    }
+  }
+
+  static get defaultOperators() {
+    return RichInput.operators;
+  }
+
+  static set defaultOperators(val) {
+    RichInput.operators = val;
+  }
+
+  /**
+   * Global default combinators inherited by newly created <rich-input> instances.
+   */
+  static get combinators() {
+    return [...RichInput._globalCombinators];
+  }
+
+  static set combinators(val) {
+    if (val === null || val === undefined) {
+      RichInput._globalCombinators = [...DEFAULT_COMBINATORS];
+    } else {
+      RichInput._globalCombinators = normalizeCombinators(val);
+    }
+  }
+
+  static get defaultCombinators() {
+    return RichInput.combinators;
+  }
+
+  static set defaultCombinators(val) {
+    RichInput.combinators = val;
+  }
+
+  /**
+   * Global default delimiters inherited by newly created <rich-input> instances.
+   */
+  static get delimiters() {
+    return [...RichInput._globalDelimiters];
+  }
+
+  static set delimiters(val) {
+    if (val === null || val === undefined) {
+      RichInput._globalDelimiters = [...DEFAULT_DELIMITERS];
+    } else {
+      RichInput._globalDelimiters = normalizeDelimiters(val);
+    }
+  }
+
+  static get defaultDelimiters() {
+    return RichInput.delimiters;
+  }
+
+  static set defaultDelimiters(val) {
+    RichInput.delimiters = val;
+  }
+
   static get observedAttributes() {
     return [
       'value',
@@ -366,6 +464,9 @@ export class RichInput extends HTMLElement {
       'autofocus',
       'required',
       'highlight-quotes',
+      'operators',
+      'combinators',
+      'delimiters',
       'aria-label',
       'aria-labelledby',
     ];
@@ -403,14 +504,26 @@ export class RichInput extends HTMLElement {
     this._popoverTitle = this.shadowRoot.querySelector('.popover-title');
     this._suggestionsList = this.shadowRoot.querySelector('.suggestions-list');
     this._clearBtn = this.shadowRoot.querySelector('.clear-button');
+    this._icon = this.shadowRoot.querySelector('.search-icon');
     this._slot = this.shadowRoot.querySelector('slot:not([name])');
+    this._lastIconColor = null;
 
     this._configuredKeywords = new Map();
+    this._operators = [...RichInput.operators];
+    this._settingOperatorsAttribute = false;
+    this._combinators = [...RichInput.combinators];
+    this._settingCombinatorsAttribute = false;
+    this._delimiters = [...RichInput.delimiters];
+    this._settingDelimitersAttribute = false;
     this._activeSuggestions = [];
     this._selectedIndex = -1;
     this._context = null;
+    this._suggestionTimeout = null;
     this._ownedRanges = [];
     this._invalidRanges = [];
+    this._operatorRanges = [];
+    this._combinatorRanges = [];
+    this._delimiterRanges = [];
     this._activeKeywordHighlightMap = new Map();
     this._isFocused = false;
     this._lastCaretPosition = -1;
@@ -432,6 +545,10 @@ export class RichInput extends HTMLElement {
 
   connectedCallback() {
     this._syncInjectedStyles();
+    this._syncIconStyle();
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => this._syncIconStyle());
+    }
     syncDocumentHighlightStyles(this.shadowRoot);
     highlightManager.register(this);
 
@@ -448,9 +565,15 @@ export class RichInput extends HTMLElement {
 
     // Listen to changes on light DOM datalists and style tags
     this._slot.addEventListener('slotchange', this._onSlotChange);
-    this._mutationObserver = new MutationObserver(() => {
+    this._mutationObserver = new MutationObserver((mutations) => {
+      this._syncIconStyle();
+      const hasLightDomChange = mutations.some(
+        (m) => !(m.target === this && m.type === 'attributes')
+      );
+      if (!hasLightDomChange) return;
       this._loadDatalists();
       this._syncInjectedStyles();
+      this._syncIconStyle();
       this.updateHighlights();
     });
     this._mutationObserver.observe(this, { childList: true, subtree: true, attributes: true, characterData: true });
@@ -472,6 +595,48 @@ export class RichInput extends HTMLElement {
     window.addEventListener('scroll', this._onGlobalResizeOrScroll, { passive: true });
 
     // Sync initial attributes
+    if (this.hasAttribute('operators')) {
+      const rawOps = this.getAttribute('operators');
+      this._operators = normalizeOperators(rawOps);
+      const normalizedAttr = this._operators.join(' ');
+      if (rawOps !== normalizedAttr) {
+        this._settingOperatorsAttribute = true;
+        this.setAttribute('operators', normalizedAttr);
+        this._settingOperatorsAttribute = false;
+      }
+    } else if (this._operators.length > 0) {
+      this._settingOperatorsAttribute = true;
+      this.setAttribute('operators', this._operators.join(' '));
+      this._settingOperatorsAttribute = false;
+    }
+    if (this.hasAttribute('combinators')) {
+      const rawCombs = this.getAttribute('combinators');
+      this._combinators = normalizeCombinators(rawCombs);
+      const normalizedAttr = this._combinators.join(' ');
+      if (rawCombs !== normalizedAttr) {
+        this._settingCombinatorsAttribute = true;
+        this.setAttribute('combinators', normalizedAttr);
+        this._settingCombinatorsAttribute = false;
+      }
+    } else if (this._combinators.length > 0) {
+      this._settingCombinatorsAttribute = true;
+      this.setAttribute('combinators', this._combinators.join(' '));
+      this._settingCombinatorsAttribute = false;
+    }
+    if (this.hasAttribute('delimiters')) {
+      const rawDelims = this.getAttribute('delimiters');
+      this._delimiters = normalizeDelimiters(rawDelims);
+      const normalizedAttr = this._delimiters.join(' ');
+      if (rawDelims !== normalizedAttr) {
+        this._settingDelimitersAttribute = true;
+        this.setAttribute('delimiters', normalizedAttr);
+        this._settingDelimitersAttribute = false;
+      }
+    } else if (this._delimiters.length > 0) {
+      this._settingDelimitersAttribute = true;
+      this.setAttribute('delimiters', this._delimiters.join(' '));
+      this._settingDelimitersAttribute = false;
+    }
     if (this.hasAttribute('value')) {
       this._input.value = this.getAttribute('value');
     }
@@ -547,6 +712,72 @@ export class RichInput extends HTMLElement {
       }
     } else if (name === 'highlight-quotes') {
       this.updateHighlights();
+    } else if (name === 'operators') {
+      if (this._settingOperatorsAttribute) return;
+      if (newValue === null) {
+        this._operators = [...RichInput.operators];
+        if (this._operators.length > 0) {
+          this._settingOperatorsAttribute = true;
+          this.setAttribute('operators', this._operators.join(' '));
+          this._settingOperatorsAttribute = false;
+        }
+      } else {
+        this._operators = normalizeOperators(newValue);
+        const normalizedAttr = this._operators.join(' ');
+        if (newValue !== normalizedAttr) {
+          this._settingOperatorsAttribute = true;
+          this.setAttribute('operators', normalizedAttr);
+          this._settingOperatorsAttribute = false;
+        }
+      }
+      this.updateHighlights();
+      if (this._isPopoverOpen()) {
+        this.updateSuggestions('operators-changed');
+      }
+    } else if (name === 'combinators') {
+      if (this._settingCombinatorsAttribute) return;
+      if (newValue === null) {
+        this._combinators = [...RichInput.combinators];
+        if (this._combinators.length > 0) {
+          this._settingCombinatorsAttribute = true;
+          this.setAttribute('combinators', this._combinators.join(' '));
+          this._settingCombinatorsAttribute = false;
+        }
+      } else {
+        this._combinators = normalizeCombinators(newValue);
+        const normalizedAttr = this._combinators.join(' ');
+        if (newValue !== normalizedAttr) {
+          this._settingCombinatorsAttribute = true;
+          this.setAttribute('combinators', normalizedAttr);
+          this._settingCombinatorsAttribute = false;
+        }
+      }
+      this.updateHighlights();
+      if (this._isPopoverOpen()) {
+        this.updateSuggestions('combinators-changed');
+      }
+    } else if (name === 'delimiters') {
+      if (this._settingDelimitersAttribute) return;
+      if (newValue === null) {
+        this._delimiters = [...RichInput.delimiters];
+        if (this._delimiters.length > 0) {
+          this._settingDelimitersAttribute = true;
+          this.setAttribute('delimiters', this._delimiters.join(' '));
+          this._settingDelimitersAttribute = false;
+        }
+      } else {
+        this._delimiters = normalizeDelimiters(newValue);
+        const normalizedAttr = this._delimiters.join(' ');
+        if (newValue !== normalizedAttr) {
+          this._settingDelimitersAttribute = true;
+          this.setAttribute('delimiters', normalizedAttr);
+          this._settingDelimitersAttribute = false;
+        }
+      }
+      this.updateHighlights();
+      if (this._isPopoverOpen()) {
+        this.updateSuggestions('delimiters-changed');
+      }
     }
   }
 
@@ -662,6 +893,108 @@ export class RichInput extends HTMLElement {
     this._input.selectionDirection = val;
   }
 
+  get operators() {
+    return [...this._operators];
+  }
+
+  set operators(val) {
+    if (val === null || val === undefined) {
+      this._operators = [...RichInput.operators];
+      this._settingOperatorsAttribute = true;
+      if (this._operators.length > 0) {
+        this.setAttribute('operators', this._operators.join(' '));
+      } else {
+        this.removeAttribute('operators');
+      }
+      this._settingOperatorsAttribute = false;
+    } else {
+      this._operators = normalizeOperators(val);
+      this._settingOperatorsAttribute = true;
+      this.setAttribute('operators', this._operators.join(' '));
+      this._settingOperatorsAttribute = false;
+    }
+    this.updateHighlights();
+    if (this._isPopoverOpen()) {
+      this.updateSuggestions('operators-changed');
+    }
+  }
+
+  getOperators() {
+    return this.operators;
+  }
+
+  setOperators(val) {
+    this.operators = val;
+  }
+
+  get combinators() {
+    return [...this._combinators];
+  }
+
+  set combinators(val) {
+    if (val === null || val === undefined) {
+      this._combinators = [...RichInput.combinators];
+      this._settingCombinatorsAttribute = true;
+      if (this._combinators.length > 0) {
+        this.setAttribute('combinators', this._combinators.join(' '));
+      } else {
+        this.removeAttribute('combinators');
+      }
+      this._settingCombinatorsAttribute = false;
+    } else {
+      this._combinators = normalizeCombinators(val);
+      this._settingCombinatorsAttribute = true;
+      this.setAttribute('combinators', this._combinators.join(' '));
+      this._settingCombinatorsAttribute = false;
+    }
+    this.updateHighlights();
+    if (this._isPopoverOpen()) {
+      this.updateSuggestions('combinators-changed');
+    }
+  }
+
+  getCombinators() {
+    return this.combinators;
+  }
+
+  setCombinators(val) {
+    this.combinators = val;
+  }
+
+  get delimiters() {
+    return [...this._delimiters];
+  }
+
+  set delimiters(val) {
+    if (val === null || val === undefined) {
+      this._delimiters = [...RichInput.delimiters];
+      this._settingDelimitersAttribute = true;
+      if (this._delimiters.length > 0) {
+        this.setAttribute('delimiters', this._delimiters.join(' '));
+      } else {
+        this.removeAttribute('delimiters');
+      }
+      this._settingDelimitersAttribute = false;
+    } else {
+      this._delimiters = normalizeDelimiters(val);
+      this._settingDelimitersAttribute = true;
+      this.setAttribute('delimiters', this._delimiters.join(' '));
+      this._settingDelimitersAttribute = false;
+    }
+    this.updateHighlights();
+    if (this._isPopoverOpen()) {
+      this.updateSuggestions('delimiters-changed');
+    }
+  }
+
+  getDelimiters() {
+    return this.delimiters;
+  }
+
+  setDelimiters(val) {
+    this.delimiters = val;
+  }
+
   // --- Public Methods ---
   focus(options) {
     this._isFocused = true;
@@ -682,7 +1015,7 @@ export class RichInput extends HTMLElement {
   }
 
   getParsedQuery() {
-    return parseSearchQuery(this._input.value);
+    return parseSearchQuery(this._input.value, this.operators, this.combinators, this.delimiters);
   }
 
   getKeywords() {
@@ -769,9 +1102,66 @@ export class RichInput extends HTMLElement {
   _onSlotChange() {
     this._loadDatalists();
     this._syncInjectedStyles();
+    this._syncIconStyle();
     this.updateHighlights();
   }
 
+  _syncIconStyle() {
+    if (!this._icon || typeof window === 'undefined' || typeof getComputedStyle !== 'function') return;
+
+    const cs = getComputedStyle(this._icon);
+    const content = cs.content;
+    const color = cs.color || '#9ca3af';
+
+    if (this._lastIconColor !== color) {
+      this._lastIconColor = color;
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${color}"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/></svg>`;
+      this._icon.style.setProperty('--_icon-default-bg', `url("data:image/svg+xml,${encodeURIComponent(svg)}")`);
+    }
+
+    if (content === 'none') {
+      if (!this._icon.hasAttribute('data-has-content')) {
+        this._icon.setAttribute('data-has-content', '');
+      }
+      if (!this._icon.hasAttribute('data-content-none')) {
+        this._icon.setAttribute('data-content-none', '');
+      }
+      this._icon.style.removeProperty('--_icon-content');
+      return;
+    }
+
+    if (this._icon.hasAttribute('data-content-none')) {
+      this._icon.removeAttribute('data-content-none');
+    }
+
+    if (content && content !== 'normal') {
+      if (!this._icon.hasAttribute('data-has-content')) {
+        this._icon.setAttribute('data-has-content', '');
+      }
+      if (content.startsWith('"') || content.startsWith("'")) {
+        if (this._icon.style.getPropertyValue('--_icon-content') !== content) {
+          this._icon.style.setProperty('--_icon-content', content);
+        }
+      } else {
+        this._icon.style.removeProperty('--_icon-content');
+      }
+      return;
+    }
+
+    if (this._icon.style.getPropertyValue('--_icon-content')) {
+      this._icon.style.removeProperty('--_icon-content');
+    }
+
+    const beforeContent = getComputedStyle(this._icon, '::before').content;
+    if (beforeContent && beforeContent !== 'none' && beforeContent !== 'normal') {
+      if (!this._icon.hasAttribute('data-has-content')) {
+        this._icon.setAttribute('data-has-content', '');
+      }
+    } else if (this._icon.hasAttribute('data-has-content')) {
+      this._icon.removeAttribute('data-has-content');
+    }
+  }
+
   // --- Public Properties ---
   get inputElement() {
     return this._input;
@@ -786,6 +1176,9 @@ export class RichInput extends HTMLElement {
     }
     this._ownedRanges = [];
     this._invalidRanges = [];
+    this._operatorRanges = [];
+    this._combinatorRanges = [];
+    this._delimiterRanges = [];
     this._activeKeywordHighlightMap.clear();
   }
 
@@ -808,7 +1201,7 @@ export class RichInput extends HTMLElement {
       return;
     }
 
-    const tokens = parseSearchTokens(text);
+    const tokens = parseSearchTokens(text, this.operators, this.combinators, this.delimiters);
     const highlightQuotes = this.getAttribute('highlight-quotes') !== 'exclude';
 
     const isFocused = this._isFocused;
@@ -832,6 +1225,15 @@ export class RichInput extends HTMLElement {
 
         const bucket = this._activeKeywordHighlightMap.get(kw);
 
+        // 0. Operator prefix range (for ::highlight(rich-input-operator))
+        if (token.operator && token.operatorEnd > token.operatorStart && token.operatorEnd <= text.length) {
+          try {
+            const opRange = this._input.createValueRange(token.operatorStart, token.operatorEnd);
+            this._ownedRanges.push(opRange);
+            this._operatorRanges.push(opRange);
+          } catch (e) {}
+        }
+
         // 1. Value range
         const start = highlightQuotes ? token.valueStart : token.innerStart;
         const end = highlightQuotes ? token.valueEnd : token.innerEnd;
@@ -890,6 +1292,39 @@ export class RichInput extends HTMLElement {
             }
           }
         }
+      } else if (token.type === 'combinator') {
+        if (token.end > token.start && token.end <= text.length) {
+          try {
+            const combRange = this._input.createValueRange(token.start, token.end);
+            this._ownedRanges.push(combRange);
+            this._combinatorRanges.push(combRange);
+          } catch (e) {}
+        }
+      } else if (token.type === 'delimiter') {
+        if (token.end > token.start && token.end <= text.length) {
+          try {
+            const delimRange = this._input.createValueRange(token.start, token.end);
+            this._ownedRanges.push(delimRange);
+            this._delimiterRanges.push(delimRange);
+          } catch (e) {}
+        }
+      } else if (token.type === 'text' && token.operator) {
+        // Highlight operator while typing an operator prefix before colon (e.g. "-" or "-sty")
+        const remainder = token.raw.slice(token.operator.length).toLowerCase();
+        const matchesKeywordPrefix =
+          remainder.length === 0 ||
+          Array.from(this._configuredKeywords.keys()).some((k) => k.startsWith(remainder));
+        if (
+          matchesKeywordPrefix &&
+          token.operatorEnd > token.operatorStart &&
+          token.operatorEnd <= text.length
+        ) {
+          try {
+            const opRange = this._input.createValueRange(token.operatorStart, token.operatorEnd);
+            this._ownedRanges.push(opRange);
+            this._operatorRanges.push(opRange);
+          } catch (e) {}
+        }
       }
     }
 
@@ -900,6 +1335,18 @@ export class RichInput extends HTMLElement {
     return this._activeKeywordHighlightMap;
   }
 
+  getActiveOperatorRanges() {
+    return this._operatorRanges;
+  }
+
+  getActiveCombinatorRanges() {
+    return this._combinatorRanges;
+  }
+
+  getActiveDelimiterRanges() {
+    return this._delimiterRanges;
+  }
+
   getActiveInvalidRanges() {
     return this._invalidRanges;
   }
@@ -949,8 +1396,9 @@ export class RichInput extends HTMLElement {
       }
     }
 
-    // Enter when popover closed triggers search/change
+    // Enter when popover closed (or no suggestion selected) triggers search/change
     if (e.key === 'Enter') {
+      this.hideSuggestions();
       this.dispatchEvent(new CustomEvent('search', {
         bubbles: true,
         composed: true,
@@ -971,15 +1419,16 @@ export class RichInput extends HTMLElement {
     this._isFocused = true;
     this._lastCaretPosition = this._input.selectionStart;
     this.updateHighlights();
-    // Optionally open suggestions if context matches
-    if (this._input.value.length > 0) {
-      this.updateSuggestions('focus');
-    }
+    this.updateSuggestions('focus');
   }
 
   _onBlur() {
     this._isFocused = false;
     this._lastCaretPosition = -1;
+    if (this._suggestionTimeout) {
+      clearTimeout(this._suggestionTimeout);
+      this._suggestionTimeout = null;
+    }
     this.updateHighlights();
     // Delay closing so click events on popover items can fire
     setTimeout(() => {
@@ -1012,7 +1461,7 @@ export class RichInput extends HTMLElement {
   _onClearClick() {
     this.value = '';
     this._input.focus();
-    this.hideSuggestions();
+    this.updateSuggestions('clear');
     this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
   }
@@ -1087,8 +1536,13 @@ export class RichInput extends HTMLElement {
   }
 
   updateSuggestions(trigger = 'input') {
+    if (this._suggestionTimeout) {
+      clearTimeout(this._suggestionTimeout);
+      this._suggestionTimeout = null;
+    }
+
     const caretPos = this._input.selectionStart;
-    const context = getCaretContext(this._input.value, caretPos, this._configuredKeywords);
+    const context = getCaretContext(this._input.value, caretPos, this._configuredKeywords, this.operators, this.combinators, this.delimiters);
 
     // If trigger is arrow and context is 'none', allow suggesting all keywords
     if (trigger === 'arrow' && context.mode === 'none') {
@@ -1099,15 +1553,69 @@ export class RichInput extends HTMLElement {
     }
 
     this._context = context;
-    const suggestions = getSuggestions(context, this._configuredKeywords);
+    const suggestions = getSuggestions(context, this._configuredKeywords, this.combinators);
 
     if (suggestions.length === 0) {
       this.hideSuggestions();
       return;
     }
 
+    // Value suggestions always show immediately.
+    // Keyword suggestions show immediately when:
+    // - focusing/clearing an empty field
+    // - typing characters that match a keyword (Boolean(context.query))
+    // - typing an operator (Boolean(context.operator))
+    // - explicitly triggered via the Down Arrow key
+    // In other cases (at the start of a new token after a space when the field is not empty),
+    // show after a small delay to prevent constant popups when typing regular sentences with spaces.
+    const isEmptyField = this._input.value.length === 0;
+    const shouldShowImmediately =
+      context.mode === 'value' ||
+      isEmptyField ||
+      Boolean(context.query) ||
+      Boolean(context.operator) ||
+      trigger === 'arrow';
+
+    if (shouldShowImmediately) {
+      this._showSuggestions(suggestions, context, trigger);
+    } else {
+      if (this._isPopoverOpen()) {
+        this.hideSuggestions();
+      }
+      this._suggestionTimeout = setTimeout(() => {
+        this._suggestionTimeout = null;
+        const isFocused =
+          this._isFocused ||
+          this.shadowRoot?.activeElement === this._input ||
+          document.activeElement === this ||
+          document.activeElement === this._input ||
+          Boolean(this.matches?.(':focus-within'));
+        if (!isFocused) return;
+
+        const currentCaretPos = this._input.selectionStart;
+        const currentContext = getCaretContext(this._input.value, currentCaretPos, this._configuredKeywords, this.operators, this.combinators, this.delimiters);
+        this._context = currentContext;
+        const currentSuggestions = getSuggestions(currentContext, this._configuredKeywords, this.combinators);
+        if (currentSuggestions.length === 0) {
+          this.hideSuggestions();
+          return;
+        }
+        this._showSuggestions(currentSuggestions, currentContext, trigger);
+      }, KEYWORD_SUGGESTION_DELAY);
+    }
+  }
+
+  _showSuggestions(suggestions, context, trigger) {
     this._activeSuggestions = suggestions;
-    this._selectedIndex = 0; // Pre-select first item for quick Enter/Tab
+
+    // Pre-select first item for quick Enter/Tab when filtering or in value mode or triggered via Down Arrow,
+    // but leave unselected (-1) when showing full keyword list at the start of a new token so Enter/Tab aren't hijacked.
+    const shouldPreselect =
+      context.mode === 'value' ||
+      Boolean(context.query) ||
+      trigger === 'arrow';
+    const existingSelectedIdx = suggestions.findIndex((s) => this._isSuggestionSelected(s));
+    this._selectedIndex = existingSelectedIdx !== -1 ? existingSelectedIdx : (shouldPreselect ? 0 : -1); // Highlight matching item or first item for quick Enter/Tab
     this._renderSuggestions();
 
     // Show popover
@@ -1126,6 +1634,10 @@ export class RichInput extends HTMLElement {
   }
 
   hideSuggestions() {
+    if (this._suggestionTimeout) {
+      clearTimeout(this._suggestionTimeout);
+      this._suggestionTimeout = null;
+    }
     if (this._isPopoverOpen()) {
       try {
         this._popover.hidePopover();
@@ -1137,6 +1649,35 @@ export class RichInput extends HTMLElement {
     this._selectedIndex = -1;
   }
 
+  _isSuggestionSelected(sug) {
+    if (!this._context || !sug) return false;
+
+    if (sug.type === 'value' && this._context.mode === 'value' && this._context.token) {
+      const currentVal = (this._context.token.innerValue ?? '').trim().toLowerCase();
+      if (!currentVal) return false;
+      const sugVal = (sug.value ?? '').trim().toLowerCase();
+      const sugLabel = (sug.label ?? '').trim().toLowerCase();
+      const sugDisplay = (sug.display ?? '').trim().toLowerCase();
+      return currentVal === sugVal || currentVal === sugLabel || currentVal === sugDisplay;
+    }
+
+    if (sug.type === 'keyword' && this._context.mode === 'keyword' && this._context.token?.type === 'keyword') {
+      const currentKw = (this._context.token.keywordLower ?? '').trim().toLowerCase();
+      if (!currentKw) return false;
+      const sugId = (sug.id ?? '').trim().toLowerCase();
+      return currentKw === sugId;
+    }
+
+    if (sug.type === 'combinator' && this._context.mode === 'keyword' && this._context.token?.type === 'combinator') {
+      const currentComb = (this._context.token.combinator ?? '').trim().toLowerCase();
+      if (!currentComb) return false;
+      const sugComb = (sug.combinator ?? sug.value ?? '').trim().toLowerCase();
+      return currentComb === sugComb;
+    }
+
+    return false;
+  }
+
   _renderSuggestions() {
     if (this._popoverTitle) {
       let title = 'Suggestions';
@@ -1152,12 +1693,17 @@ export class RichInput extends HTMLElement {
     this._suggestionsList.replaceChildren();
 
     this._activeSuggestions.forEach((sug, idx) => {
+      const isAct = idx === this._selectedIndex;
+      const isSel = this._isSuggestionSelected(sug);
       const li = document.createElement('li');
-      li.className = `suggestion-item${idx === this._selectedIndex ? ' active' : ''}`;
+      li.className = `suggestion-item${isAct ? ' active' : ''}${isSel ? ' selected' : ''}`;
       li.id = `ri-opt-${idx}`;
       li.setAttribute('role', 'option');
-      li.setAttribute('aria-selected', idx === this._selectedIndex ? 'true' : 'false');
-      li.setAttribute('part', `suggestion-item${idx === this._selectedIndex ? ' suggestion-item-active' : ''}`);
+      li.setAttribute('aria-selected', isSel ? 'true' : 'false');
+      const parts = ['suggestion-item'];
+      if (isAct) parts.push('suggestion-item-active');
+      if (isSel) parts.push('suggestion-item-selected');
+      li.setAttribute('part', parts.join(' '));
 
       if (sug.image) {
         const img = sug.image.cloneNode(true);
@@ -1173,7 +1719,13 @@ export class RichInput extends HTMLElement {
 
       const title = document.createElement('span');
       title.className = 'suggestion-title';
-      title.setAttribute('part', sug.type === 'keyword' ? 'suggestion-keyword' : 'suggestion-value');
+      const titlePart =
+        sug.type === 'keyword'
+          ? 'suggestion-keyword'
+          : sug.type === 'combinator'
+          ? 'suggestion-combinator'
+          : 'suggestion-value';
+      title.setAttribute('part', titlePart);
       title.textContent = sug.display;
 
       const desc = document.createElement('span');
@@ -1209,7 +1761,11 @@ export class RichInput extends HTMLElement {
   _moveSelection(delta) {
     if (this._activeSuggestions.length === 0) return;
     const len = this._activeSuggestions.length;
-    this._selectedIndex = (this._selectedIndex + delta + len) % len;
+    if (this._selectedIndex === -1) {
+      this._selectedIndex = delta > 0 ? 0 : len - 1;
+    } else {
+      this._selectedIndex = (this._selectedIndex + delta + len) % len;
+    }
     this._updateActiveSuggestion();
 
     // Scroll active item into view
@@ -1223,9 +1779,14 @@ export class RichInput extends HTMLElement {
     const items = this._suggestionsList.children;
     for (let i = 0; i < items.length; i++) {
       const isAct = i === this._selectedIndex;
+      const isSel = this._isSuggestionSelected(this._activeSuggestions[i]);
       items[i].classList.toggle('active', isAct);
-      items[i].setAttribute('aria-selected', isAct ? 'true' : 'false');
-      items[i].setAttribute('part', `suggestion-item${isAct ? ' suggestion-item-active' : ''}`);
+      items[i].classList.toggle('selected', isSel);
+      items[i].setAttribute('aria-selected', isSel ? 'true' : 'false');
+      const parts = ['suggestion-item'];
+      if (isAct) parts.push('suggestion-item-active');
+      if (isSel) parts.push('suggestion-item-selected');
+      items[i].setAttribute('part', parts.join(' '));
       if (isAct) {
         this._input.setAttribute('aria-activedescendant', items[i].id);
       }
@@ -1253,7 +1814,9 @@ export class RichInput extends HTMLElement {
     this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     const selectDetail = {
       type: suggestion.type,
-      keyword: suggestion.keyword || suggestion.id,
+      operator: this._context?.operator || null,
+      combinator: suggestion.combinator || (suggestion.type === 'combinator' ? suggestion.value : null),
+      keyword: suggestion.keyword || (suggestion.type === 'keyword' ? suggestion.id : null),
       value: suggestion.value || null,
       label: suggestion.label || null,
       query: newValue,
@@ -1263,12 +1826,9 @@ export class RichInput extends HTMLElement {
       composed: true,
       detail: selectDetail,
     }));
-    // If a keyword was selected (e.g. `mix:`), immediately show value suggestions
-    if (suggestion.type === 'keyword') {
-      this.updateSuggestions('keyword-selected');
-    } else {
-      this.hideSuggestions();
-    }
+    // Immediately show value suggestions when a keyword was selected (e.g. `mix:`),
+    // or keyword suggestions when a value or combinator was selected (since cursor is now after a space at a new token)
+    this.updateSuggestions(suggestion.type === 'keyword' ? 'keyword-selected' : 'value-selected');
   }
 }