rich-input 1.3.0 → 1.4.0

package/components/rich-input.js

@@ -3,7 +3,7 @@
  * 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';
@@ -59,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 {
@@ -115,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;
@@ -134,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;
@@ -182,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)));
@@ -223,7 +246,7 @@ 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 {
@@ -245,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;
@@ -266,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"
@@ -296,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
@@ -362,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',
@@ -372,6 +464,9 @@ export class RichInput extends HTMLElement {
       'autofocus',
       'required',
       'highlight-quotes',
+      'operators',
+      'combinators',
+      'delimiters',
       'aria-label',
       'aria-labelledby',
     ];
@@ -409,15 +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;
@@ -439,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);
 
@@ -455,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 });
@@ -479,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');
     }
@@ -554,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');
+      }
     }
   }
 
@@ -669,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;
@@ -689,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() {
@@ -776,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;
@@ -793,6 +1176,9 @@ export class RichInput extends HTMLElement {
     }
     this._ownedRanges = [];
     this._invalidRanges = [];
+    this._operatorRanges = [];
+    this._combinatorRanges = [];
+    this._delimiterRanges = [];
     this._activeKeywordHighlightMap.clear();
   }
 
@@ -815,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;
@@ -839,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;
@@ -897,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) {}
+        }
       }
     }
 
@@ -907,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;
   }
@@ -1102,7 +1542,7 @@ export class RichInput extends HTMLElement {
     }
 
     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') {
@@ -1113,7 +1553,7 @@ 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();
@@ -1124,6 +1564,7 @@ export class RichInput extends HTMLElement {
     // 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.
@@ -1132,6 +1573,7 @@ export class RichInput extends HTMLElement {
       context.mode === 'value' ||
       isEmptyField ||
       Boolean(context.query) ||
+      Boolean(context.operator) ||
       trigger === 'arrow';
 
     if (shouldShowImmediately) {
@@ -1151,9 +1593,9 @@ export class RichInput extends HTMLElement {
         if (!isFocused) return;
 
         const currentCaretPos = this._input.selectionStart;
-        const currentContext = getCaretContext(this._input.value, currentCaretPos, this._configuredKeywords);
+        const currentContext = getCaretContext(this._input.value, currentCaretPos, this._configuredKeywords, this.operators, this.combinators, this.delimiters);
         this._context = currentContext;
-        const currentSuggestions = getSuggestions(currentContext, this._configuredKeywords);
+        const currentSuggestions = getSuggestions(currentContext, this._configuredKeywords, this.combinators);
         if (currentSuggestions.length === 0) {
           this.hideSuggestions();
           return;
@@ -1226,6 +1668,13 @@ export class RichInput extends HTMLElement {
       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;
   }
 
@@ -1270,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');
@@ -1359,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,
@@ -1370,7 +1827,7 @@ export class RichInput extends HTMLElement {
       detail: selectDetail,
     }));
     // Immediately show value suggestions when a keyword was selected (e.g. `mix:`),
-    // or keyword suggestions when a value was selected (since cursor is now after a space at a new token)
+    // 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');
   }
 }