rich-input 1.0.0 → 1.1.0

package/README.md

@@ -15,14 +15,14 @@ The `<rich-input>` component is a rich input field that acts like a standard `<i
 - **Dual Contextual Autocomplete**:
   - **Keywords**: Typing at the start of a token (e.g. typing `a`) suggests configured keywords like `artist:` and `style:`.
   - **Values**: Typing within a keyword value (e.g. `label:"K` or `label:K`) suggests matching options like `"Keinemusik"` and `"Kranky"`.
-- **Range-Based Positioning via OpaqueRange**: Positions autocomplete dropdown popovers anchored to the start of the active `OpaqueRange` (e.g. at the opening quotation mark of a value) using `range.getBoundingClientRect()`, rather than shifting with the cursor.
+- **Range-Based Positioning via OpaqueRange**: Positions autocomplete dropdown popovers anchored to the start of the active `OpaqueRange` (e.g. at the opening quotation mark of a value) using `range.getBoundingClientRect()`, rather than shifting with the cursor (with a hidden mirror-div fallback in unsupported browsers).
 - **Native In-Input Highlighting via CSS Custom Highlight API**: Highlights keyword values inside the `<input>` control using standard CSS rules like `::highlight(label)` or `::highlight(year)` without brittle mirror-div overlays.
 - **Declarative Configuration via `<datalist>`**: Configure keywords and options purely in HTML by nesting standard `<datalist>` elements with `<option>` tags inside `<rich-input>`.
 - **Rich Option Markup**: Embed custom HTML markup (such as logos, images, icons, and avatars) directly inside `<option>` elements for rich, visual suggestion popovers.
 - **Form Associated**: Implements `static formAssociated = true` and `ElementInternals` to participate seamlessly in `<form>` submission, `FormData`, and form reset lifecycles.
 - **Shadow Parts Theming (`::part`)**: Full CSS customizability using `::part(input)`, `::part(control)`, `::part(popover)`, `::part(suggestion-item)`, etc.
 - **Accessible (W3C Combobox Pattern)**: ARIA 1.2 compliant combobox with keyboard navigation (`ArrowUp`, `ArrowDown`, `Enter`, `Tab`, `Escape`), `aria-expanded`, and `aria-activedescendant`.
-- **Graceful Fallback**: Automatically feature-detects `createValueRange` and gracefully falls back to control-aligned popovers in environments without OpaqueRange.
+- **Graceful Fallback**: Automatically feature-detects browser capabilities. In browsers with no `OpaqueRange` support but with CSS Custom Highlight API support (e.g. Safari 17.2+, Firefox 141+), it falls back to an adapted `[contenteditable]` element to provide in-input syntax highlighting via standard DOM `Range`s. In environments without `OpaqueRange`, dropdown popovers are positioned using a hidden mirror-div measurement fallback.
 
 ---
 
@@ -40,7 +40,7 @@ The visual below illustrates the internal Shadow DOM elements, exposed CSS Shado
 - `::part(input)`: The native `<input type="text">` where users type.
 - `::highlight(<keyword>)`: Target pseudo-element for styling keyword values via the CSS Custom Highlight API (e.g. `::highlight(label)`, `::highlight(year)`).
 - `::part(clear-button)`: The clear button (visible when text is present).
-- `::part(popover)`: The autocomplete dropdown popover container anchored to the start of the active range via `OpaqueRange`.
+- `::part(popover)`: The autocomplete dropdown popover container anchored to the start of the active range via `OpaqueRange` (or mirror-div fallback).
 - `::part(suggestions-header)`: The header bar at the top of the suggestions popover.
 - `::part(suggestions-list)`: The `<ul>` container holding autocomplete suggestion items.
 - `::part(suggestion-item)`: Each suggestion `<li>` row.
@@ -233,16 +233,18 @@ const highlight = new Highlight(valueRange);
 CSS.highlights.set('label', highlight);
 ```
 
-`<rich-input>` automatically checks `typeof HTMLInputElement.prototype.createValueRange === 'function'`. On supported browsers, caret tracking and `::highlight()` are applied natively. On browsers without `createValueRange`, `<rich-input>` falls back to input-relative popover positioning.
+`<rich-input>` automatically checks `typeof HTMLInputElement.prototype.createValueRange === 'function'`. On supported browsers (Chromium 152+), caret tracking and `::highlight()` are applied natively via `OpaqueRange`.
+
+In browsers without `OpaqueRange` that support the CSS Custom Highlight API (such as Safari 17.2+ and Firefox 141+), `<rich-input>` automatically falls back to an adapted single-line `[contenteditable]` element inside its shadow DOM. This exposes standard DOM `Text` nodes so standard `Range` objects can be created and passed to `CSS.highlights`, delivering on-the-fly `::highlight()` syntax highlighting across browsers. In environments lacking range positioning, popover dropdowns are positioned using a hidden mirror `<div>` text measurement fallback.
 
 ---
 
 ## Styling Highlights with the CSS Custom Highlight API
 
-Values corresponding to configured keywords are registered into the global `CSS.highlights` registry. Style them directly using `::highlight(keyword)`:
+Values corresponding to configured keywords are registered into the global `CSS.highlights` registry and styled using standard CSS `::highlight(keyword)` pseudo-elements in your stylesheet:
 
 ```css
-/* Style the value set in label:"We Play House Recordings" */
+/* Style the value set in label:"XL Recordings" */
 ::highlight(label) {
   background-color: oklch(0.92 0.08 240);
   color: oklch(0.28 0.14 240);
@@ -261,18 +263,6 @@ Values corresponding to configured keywords are registered into the global `CSS.
   color: oklch(0.32 0.14 320);
 }
 
-/* Style musical style filters */
-::highlight(style) {
-  background-color: oklch(0.93 0.08 190);
-  color: oklch(0.3 0.12 190);
-}
-
-/* Style genre filters */
-::highlight(genre) {
-  background-color: oklch(0.93 0.1 145);
-  color: oklch(0.3 0.14 145);
-}
-
 /* Generic prefix highlight for keyword labels (e.g. "label:", "year:") */
 ::highlight(rich-input-keyword) {
   color: #64748b;
@@ -280,6 +270,22 @@ Values corresponding to configured keywords are registered into the global `CSS.
 }
 ```
 
+In browsers using the `[contenteditable]` fallback inside Shadow DOM (such as Safari and Firefox), `<rich-input>` automatically syncs document-level `::highlight()` rules into its shadow stylesheet so that highlighting works across shadow boundaries without extra markup.
+
+For self-contained widgets or instance-specific style overrides, `<rich-input>` also supports an optional embedded `<style>` block as a direct child, which is automatically injected into the shadow root:
+
+```html
+<rich-input value='artist:"Aphex Twin" label:"XL Recordings"'>
+  <style>
+    ::highlight(label) {
+      background-color: #dbeafe;
+      color: #1e40af;
+    }
+  </style>
+  <datalist id="label" label="Record Label">...</datalist>
+</rich-input>
+```
+
 > **Note:** Supported CSS properties on `::highlight()` include `color`, `background-color`, `text-decoration`, `text-shadow`, `-webkit-text-stroke-color`, `-webkit-text-stroke-width`, and `-webkit-text-fill-color`.
 
 ---

package/assets/rich-input-parts.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1340 480" width="100%" height="100%">
-  <defs>
-    <style>
-      :root {
+  <style>
+    @scope {
+      :scope {
         --canvas-bg: #f8fafc;
         --card-bg: #ffffff;
         --border-color: #cbd5e1;
@@ -31,7 +31,7 @@
       }
 
       @media (prefers-color-scheme: dark) {
-        :root {
+        :scope {
           --canvas-bg: #0f172a;
           --card-bg: #1e293b;
           --border-color: #334155;
@@ -148,116 +148,117 @@
       }
 
       /* When hovering the SVG, lines and labels go down to opacity 0.5 */
-      svg:hover .code-label,
-      svg:hover .guide-line,
-      svg:hover .guide-box,
-      svg:hover .guide-dot {
+      :scope:hover .code-label,
+      :scope:hover .guide-line,
+      :scope:hover .guide-box,
+      :scope:hover .guide-dot {
         opacity: 0.4;
       }
 
       /* When a specific code-label is hovered, dim all other labels, lines, boxes, and comp-parts */
-      svg:has(.code-label:hover) .code-label:not(:hover) {
+      :scope:has(.code-label:hover) .code-label:not(:hover) {
         opacity: 0.18;
       }
 
-      svg:has(.code-label:hover) .guide-line,
-      svg:has(.code-label:hover) .guide-box,
-      svg:has(.code-label:hover) .guide-dot {
+      :scope:has(.code-label:hover) .guide-line,
+      :scope:has(.code-label:hover) .guide-box,
+      :scope:has(.code-label:hover) .guide-dot {
         opacity: 0.05;
       }
 
-      svg:has(.code-label:hover) .comp-part {
+      :scope:has(.code-label:hover) .comp-part {
         opacity: 0.25;
       }
 
       /* Specific label hover: keep matching guide line, box, dot, and element at 100% */
-      svg:has(.lbl-host:hover) .target-host,
-      svg:has(.lbl-control:hover) .target-control,
-      svg:has(.lbl-icon:hover) .target-icon,
-      svg:has(.lbl-input:hover) .target-input,
-      svg:has(.lbl-hl-val:hover) .target-hl-val,
-      svg:has(.lbl-clear:hover) .target-clear,
-      svg:has(.lbl-popover:hover) .target-popover,
-      svg:has(.lbl-header:hover) .target-header,
-      svg:has(.lbl-list:hover) .target-list,
-      svg:has(.lbl-item:hover) .target-item,
-      svg:has(.lbl-active:hover) .target-active,
-      svg:has(.lbl-image:hover) .target-image,
-      svg:has(.lbl-val:hover) .target-val {
+      :scope:has(.lbl-host:hover) .target-host,
+      :scope:has(.lbl-control:hover) .target-control,
+      :scope:has(.lbl-icon:hover) .target-icon,
+      :scope:has(.lbl-input:hover) .target-input,
+      :scope:has(.lbl-hl-val:hover) .target-hl-val,
+      :scope:has(.lbl-clear:hover) .target-clear,
+      :scope:has(.lbl-popover:hover) .target-popover,
+      :scope:has(.lbl-header:hover) .target-header,
+      :scope:has(.lbl-list:hover) .target-list,
+      :scope:has(.lbl-item:hover) .target-item,
+      :scope:has(.lbl-active:hover) .target-active,
+      :scope:has(.lbl-image:hover) .target-image,
+      :scope:has(.lbl-val:hover) .target-val {
         opacity: 1 !important;
       }
 
       /* When host label is hovered, keep entire component at 100% */
-      svg:has(.lbl-host:hover) .comp-part {
+      :scope:has(.lbl-host:hover) .comp-part {
         opacity: 1 !important;
       }
 
       /* Contained parts: when hovering a container, contained parts in the preview also remain at opacity 1 */
       /* Control contains icon, input (including highlight hou), and clear button */
-      svg:has(.lbl-control:hover) #component-preview .target-icon,
-      svg:has(.lbl-control:hover) #component-preview .target-input,
-      svg:has(.lbl-control:hover) #component-preview .target-hl-val,
-      svg:has(.lbl-control:hover) #component-preview .target-clear {
+      :scope:has(.lbl-control:hover) #component-preview .target-icon,
+      :scope:has(.lbl-control:hover) #component-preview .target-input,
+      :scope:has(.lbl-control:hover) #component-preview .target-hl-val,
+      :scope:has(.lbl-control:hover) #component-preview .target-clear {
         opacity: 1 !important;
       }
 
       /* Input contains highlight label (hou text and background pill) */
-      svg:has(.lbl-input:hover) #component-preview .target-hl-val {
+      :scope:has(.lbl-input:hover) #component-preview .target-hl-val {
         opacity: 1 !important;
       }
 
       /* Popover contains header, list, and all suggestion items */
-      svg:has(.lbl-popover:hover) #component-preview .target-header,
-      svg:has(.lbl-popover:hover) #component-preview .target-item,
-      svg:has(.lbl-popover:hover) #component-preview .target-active {
+      :scope:has(.lbl-popover:hover) #component-preview .target-header,
+      :scope:has(.lbl-popover:hover) #component-preview .target-item,
+      :scope:has(.lbl-popover:hover) #component-preview .target-active {
         opacity: 1 !important;
       }
 
       /* Suggestions list contains all suggestion items */
-      svg:has(.lbl-list:hover) #component-preview .target-item,
-      svg:has(.lbl-list:hover) #component-preview .target-active {
+      :scope:has(.lbl-list:hover) #component-preview .target-item,
+      :scope:has(.lbl-list:hover) #component-preview .target-active {
         opacity: 1 !important;
       }
 
       /* Thicken active guide line when hovered */
-      svg:has(.lbl-host:hover) .target-host.guide-line,
-      svg:has(.lbl-control:hover) .target-control.guide-line,
-      svg:has(.lbl-icon:hover) .target-icon.guide-line,
-      svg:has(.lbl-input:hover) .target-input.guide-line,
-      svg:has(.lbl-hl-val:hover) .target-hl-val.guide-line,
-      svg:has(.lbl-clear:hover) .target-clear.guide-line,
-      svg:has(.lbl-popover:hover) .target-popover.guide-line,
-      svg:has(.lbl-header:hover) .target-header.guide-line,
-      svg:has(.lbl-list:hover) .target-list.guide-line,
-      svg:has(.lbl-item:hover) .target-item.guide-line,
-      svg:has(.lbl-active:hover) .target-active.guide-line,
-      svg:has(.lbl-image:hover) .target-image.guide-line,
-      svg:has(.lbl-val:hover) .target-val.guide-line {
+      :scope:has(.lbl-host:hover) .target-host.guide-line,
+      :scope:has(.lbl-control:hover) .target-control.guide-line,
+      :scope:has(.lbl-icon:hover) .target-icon.guide-line,
+      :scope:has(.lbl-input:hover) .target-input.guide-line,
+      :scope:has(.lbl-hl-val:hover) .target-hl-val.guide-line,
+      :scope:has(.lbl-clear:hover) .target-clear.guide-line,
+      :scope:has(.lbl-popover:hover) .target-popover.guide-line,
+      :scope:has(.lbl-header:hover) .target-header.guide-line,
+      :scope:has(.lbl-list:hover) .target-list.guide-line,
+      :scope:has(.lbl-item:hover) .target-item.guide-line,
+      :scope:has(.lbl-active:hover) .target-active.guide-line,
+      :scope:has(.lbl-image:hover) .target-image.guide-line,
+      :scope:has(.lbl-val:hover) .target-val.guide-line {
         stroke-width: 2px;
       }
 
       /* Thicken active guide box when hovered */
-      svg:has(.lbl-host:hover) .target-host.guide-box,
-      svg:has(.lbl-control:hover) .target-control.guide-box,
-      svg:has(.lbl-icon:hover) .target-icon.guide-box,
-      svg:has(.lbl-input:hover) .target-input.guide-box,
-      svg:has(.lbl-hl-val:hover) .target-hl-val.guide-box,
-      svg:has(.lbl-clear:hover) .target-clear.guide-box,
-      svg:has(.lbl-popover:hover) .target-popover.guide-box,
-      svg:has(.lbl-header:hover) .target-header.guide-box,
-      svg:has(.lbl-list:hover) .target-list.guide-box,
-      svg:has(.lbl-item:hover) .target-item.guide-box,
-      svg:has(.lbl-active:hover) .target-active.guide-box,
-      svg:has(.lbl-image:hover) .target-image.guide-box,
-      svg:has(.lbl-val:hover) .target-val.guide-box {
+      :scope:has(.lbl-host:hover) .target-host.guide-box,
+      :scope:has(.lbl-control:hover) .target-control.guide-box,
+      :scope:has(.lbl-icon:hover) .target-icon.guide-box,
+      :scope:has(.lbl-input:hover) .target-input.guide-box,
+      :scope:has(.lbl-hl-val:hover) .target-hl-val.guide-box,
+      :scope:has(.lbl-clear:hover) .target-clear.guide-box,
+      :scope:has(.lbl-popover:hover) .target-popover.guide-box,
+      :scope:has(.lbl-header:hover) .target-header.guide-box,
+      :scope:has(.lbl-list:hover) .target-list.guide-box,
+      :scope:has(.lbl-item:hover) .target-item.guide-box,
+      :scope:has(.lbl-active:hover) .target-active.guide-box,
+      :scope:has(.lbl-image:hover) .target-image.guide-box,
+      :scope:has(.lbl-val:hover) .target-val.guide-box {
         stroke-width: 2px;
       }
 
       .code-label:hover {
         opacity: 1 !important;
       }
-    </style>
-    
+    }
+  </style>
+  <defs>
     <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
       <feDropShadow dx="0" dy="8" stdDeviation="12" flood-opacity="0.12"/>
     </filter>

package/components/rich-input.js

@@ -6,6 +6,7 @@
 import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion } 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 TEMPLATE = document.createElement('template');
 TEMPLATE.innerHTML = `
@@ -89,12 +90,41 @@ TEMPLATE.innerHTML = `
     line-height: 1.5;
     padding: 0.625rem 0;
     color: var(--ri-input-color, var(--rs-input-color, #111827));
+    white-space: pre;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    box-sizing: border-box;
+  }
+
+  .search-input::-webkit-scrollbar {
+    display: none;
   }
 
   .search-input::placeholder {
     color: var(--ri-placeholder-color, var(--rs-placeholder-color, #9ca3af));
   }
 
+  /* Contenteditable empty placeholder fallback */
+  .search-input:empty::before {
+    content: attr(data-placeholder);
+    color: var(--ri-placeholder-color, var(--rs-placeholder-color, #9ca3af));
+    pointer-events: none;
+    display: inline-block;
+  }
+
+  /* Generic prefix highlight for keywords */
+  ::highlight(rich-input-keyword) {
+    color: var(--ri-keyword-color, #64748b);
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Visually hide datalists and custom style tags in slot */
+  ::slotted(datalist),
+  ::slotted(style) {
+    display: none !important;
+  }
+
   .clear-button {
     flex-shrink: 0;
     display: inline-flex;
@@ -266,6 +296,45 @@ TEMPLATE.innerHTML = `
 </div>
 `;
 
+function extractHighlightRules(rules) {
+  let css = '';
+  for (const rule of rules) {
+    try {
+      if (rule.cssRules && rule.cssRules.length > 0) {
+        css += extractHighlightRules(rule.cssRules);
+      } else if (rule.cssText && rule.cssText.includes('::highlight')) {
+        css += rule.cssText + '\n';
+      }
+    } catch (e) {}
+  }
+  return css;
+}
+
+function syncDocumentHighlightStyles(shadowRoot) {
+  if (typeof document === 'undefined' || !shadowRoot || !isContentEditableFallbackActive) return;
+  try {
+    let highlightCss = '';
+    for (const sheet of document.styleSheets) {
+      try {
+        if (sheet.cssRules) {
+          highlightCss += extractHighlightRules(sheet.cssRules);
+        }
+      } catch (e) {}
+    }
+    if (highlightCss) {
+      let styleEl = shadowRoot.getElementById('ri-synced-highlight-styles');
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = 'ri-synced-highlight-styles';
+        shadowRoot.appendChild(styleEl);
+      }
+      if (styleEl.textContent !== highlightCss) {
+        styleEl.textContent = highlightCss;
+      }
+    }
+  } catch (e) {}
+}
+
 export class RichInput extends HTMLElement {
   static formAssociated = true;
 
@@ -289,7 +358,26 @@ export class RichInput extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.appendChild(TEMPLATE.content.cloneNode(true));
 
-    this._input = this.shadowRoot.querySelector('.search-input');
+    // In browsers lacking OpaqueRange but supporting CSS Custom Highlights (Safari 17.2+, Firefox 141+),
+    // swap in a [contenteditable] element to expose standard DOM Text nodes for Custom Highlights.
+    const useContentEditable = isContentEditableFallbackActive;
+    if (useContentEditable) {
+      const existingInput = this.shadowRoot.querySelector('.search-input');
+      const editableDiv = document.createElement('div');
+      editableDiv.className = 'search-input';
+      editableDiv.setAttribute('part', 'input');
+      editableDiv.setAttribute('role', 'combobox');
+      editableDiv.setAttribute('aria-autocomplete', 'list');
+      editableDiv.setAttribute('aria-expanded', 'false');
+      editableDiv.setAttribute('aria-haspopup', 'listbox');
+      editableDiv.setAttribute('spellcheck', 'false');
+      editableDiv.setAttribute('tabindex', '0');
+      existingInput.replaceWith(editableDiv);
+      this._input = setupContentEditableAdapter(editableDiv, this);
+    } else {
+      this._input = this.shadowRoot.querySelector('.search-input');
+    }
+
     this._popover = this.shadowRoot.querySelector('.popover');
     this._popoverTitle = this.shadowRoot.querySelector('.popover-title');
     this._suggestionsList = this.shadowRoot.querySelector('.suggestions-list');
@@ -317,15 +405,18 @@ export class RichInput extends HTMLElement {
   }
 
   connectedCallback() {
+    this._syncInjectedStyles();
+    syncDocumentHighlightStyles(this.shadowRoot);
     highlightManager.register(this);
 
     // Parse initial datalists
     this._loadDatalists();
 
-    // Listen to changes on light DOM datalists
+    // Listen to changes on light DOM datalists and style tags
     this._slot.addEventListener('slotchange', this._onSlotChange);
     this._mutationObserver = new MutationObserver(() => {
       this._loadDatalists();
+      this._syncInjectedStyles();
       this.updateHighlights();
     });
     this._mutationObserver.observe(this, { childList: true, subtree: true, attributes: true, characterData: true });
@@ -587,11 +678,42 @@ export class RichInput extends HTMLElement {
     this._configuredKeywords = newMap;
   }
 
+  // --- Injected <style> Synchronization ---
+  _syncInjectedStyles() {
+    const styleEls = this.querySelectorAll('style');
+    let customCss = '';
+    for (const styleEl of styleEls) {
+      if (styleEl.textContent) {
+        customCss += styleEl.textContent + '\n';
+      }
+    }
+
+    let targetStyle = this.shadowRoot.getElementById('ri-injected-styles');
+    if (customCss.trim()) {
+      if (!targetStyle) {
+        targetStyle = document.createElement('style');
+        targetStyle.id = 'ri-injected-styles';
+        this.shadowRoot.appendChild(targetStyle);
+      }
+      if (targetStyle.textContent !== customCss) {
+        targetStyle.textContent = customCss;
+      }
+    } else if (targetStyle) {
+      targetStyle.remove();
+    }
+  }
+
   _onSlotChange() {
     this._loadDatalists();
+    this._syncInjectedStyles();
     this.updateHighlights();
   }
 
+  // --- Public Properties ---
+  get inputElement() {
+    return this._input;
+  }
+
   // --- Highlighting with OpaqueRange & Custom Highlight API ---
   _disconnectOwnedRanges() {
     for (const r of this._ownedRanges) {
@@ -606,10 +728,16 @@ export class RichInput extends HTMLElement {
   updateHighlights() {
     this._disconnectOwnedRanges();
 
-    if (!isOpaqueRangeSupported || !isHighlightSupported) {
+    if (!isHighlightSupported) {
+      return;
+    }
+    if (!isOpaqueRangeSupported && typeof this._input?.createValueRange !== 'function') {
       return;
     }
 
+    this._syncInjectedStyles();
+    syncDocumentHighlightStyles(this.shadowRoot);
+
     const text = this._input.value;
     if (!text) {
       highlightManager.syncAll();
@@ -739,7 +867,10 @@ export class RichInput extends HTMLElement {
     }, 150);
   }
 
-  _onClick() {
+  _onClick(e) {
+    if (e && typeof e.clientX === 'number' && typeof this._input?.updateCaretFromPoint === 'function') {
+      this._input.updateCaretFromPoint(e.clientX, e.clientY);
+    }
     this.updateSuggestions('click');
   }
 
@@ -758,7 +889,8 @@ export class RichInput extends HTMLElement {
   }
 
   _getCurrentOpaqueRange() {
-    if (!this._context || !isOpaqueRangeSupported) return null;
+    if (!this._context) return null;
+    if (!isOpaqueRangeSupported && typeof this._input?.createValueRange !== 'function') return null;
 
     const { mode, token, caretPos } = this._context;
 
@@ -851,7 +983,7 @@ export class RichInput extends HTMLElement {
       } catch (e) {}
     }
 
-    // Position popover at the start of the current OpaqueRange
+    // Position popover at the start of the current OpaqueRange (or via mirror-div fallback when OpaqueRange is unsupported)
     const currentRange = this._getCurrentOpaqueRange();
     const anchor = currentRange || (context.replaceStart !== undefined ? context.replaceStart : context.caretPos);
     const anchorCoords = getCaretCoordinates(this._input, anchor);

package/index.js

@@ -6,7 +6,8 @@
 import { RichInput } from './components/rich-input.js';
 import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion } from './utils/query-parser.js';
 import { highlightManager, isOpaqueRangeSupported, isHighlightSupported } from './utils/highlights.js';
-import { getCaretCoordinates, getRangeCoordinates, positionPopover } from './utils/positioning.js';
+import { getCaretCoordinates, getRangeCoordinates, positionPopover, getCaretLeftWithMirrorDiv } from './utils/positioning.js';
+import { setupContentEditableAdapter, isContentEditableFallbackActive } from './utils/contenteditable-adapter.js';
 
 if (typeof customElements !== 'undefined') {
   if (!customElements.get('rich-input')) {
@@ -24,9 +25,12 @@ export {
   highlightManager,
   isOpaqueRangeSupported,
   isHighlightSupported,
+  isContentEditableFallbackActive,
+  setupContentEditableAdapter,
   getCaretCoordinates,
   getRangeCoordinates,
   positionPopover,
+  getCaretLeftWithMirrorDiv,
 };
 
 export default RichInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rich-input",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A rich input field with keyword-based autocomplete and in-input highlighting powered by <datalist>, OpaqueRange, and the Custom Highlight API",
   "type": "module",
   "main": "./index.js",

package/utils/contenteditable-adapter.js

@@ -0,0 +1,421 @@
+/**
+ * ContentEditable adapter for <rich-input>
+ *
+ * In browsers that do not support the OpaqueRange API (HTMLInputElement.createValueRange)
+ * but DO support the CSS Custom Highlight API (Safari 17.2+, Firefox 141+), this adapter
+ * enables using a single-line [contenteditable] element inside <rich-input>.
+ *
+ * This exposes standard DOM Text nodes so standard DOM Range objects can be created
+ * and registered with CSS.highlights, delivering on-the-fly syntax highlighting.
+ */
+
+import { isOpaqueRangeSupported, isHighlightSupported } from './highlights.js';
+
+export const isContentEditableFallbackActive = !isOpaqueRangeSupported && isHighlightSupported;
+
+/**
+ * Calculates character offset of a container + offset within an element.
+ *
+ * @param {HTMLElement} el
+ * @param {Node} container
+ * @param {number} offset
+ * @returns {number|null}
+ */
+export function getOffsetInElement(el, container, offset) {
+  if (!el || !container) return null;
+  if (!el.contains(container) && el !== container) return null;
+
+  try {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.setEnd(container, offset);
+    return range.toString().length;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Derives caret character offset directly from viewport client coordinates.
+ * Uses WebKit document.caretRangeFromPoint and W3C document.caretPositionFromPoint.
+ *
+ * @param {HTMLElement} el
+ * @param {number} clientX
+ * @param {number} clientY
+ * @returns {number|null}
+ */
+export function getCaretOffsetFromPoint(el, clientX, clientY) {
+  if (typeof document === 'undefined') return null;
+
+  // 1. WebKit/Blink standard: document.caretRangeFromPoint (supported in Safari)
+  if (typeof document.caretRangeFromPoint === 'function') {
+    try {
+      const range = document.caretRangeFromPoint(clientX, clientY);
+      if (range && range.startContainer) {
+        const offset = getOffsetInElement(el, range.startContainer, range.startOffset);
+        if (offset !== null) return offset;
+      }
+    } catch (e) {}
+  }
+
+  // 2. W3C standard: document.caretPositionFromPoint (supported in Firefox & modern WebKit)
+  if (typeof document.caretPositionFromPoint === 'function') {
+    try {
+      const pos = document.caretPositionFromPoint(clientX, clientY);
+      if (pos && pos.offsetNode) {
+        const offset = getOffsetInElement(el, pos.offsetNode, pos.offset);
+        if (offset !== null) return offset;
+      }
+    } catch (e) {}
+  }
+
+  return null;
+}
+
+/**
+ * Gets the current character caret offset inside a contenteditable element.
+ * Pierces Shadow DOM boundaries via shadowRoot.getSelection() and Selection.getComposedRanges().
+ *
+ * @param {HTMLElement} el
+ * @param {boolean} isStart Whether to get selection start (true) or end (false)
+ * @returns {number}
+ */
+export function getCaretCharacterOffset(el, isStart = true) {
+  if (typeof window === 'undefined') return 0;
+
+  const root = typeof el.getRootNode === 'function' ? el.getRootNode() : null;
+  let range = null;
+
+  // 1. Try ShadowRoot.getSelection() if supported
+  if (root && typeof root.getSelection === 'function') {
+    try {
+      const shadowSel = root.getSelection();
+      if (shadowSel && shadowSel.rangeCount > 0) {
+        range = shadowSel.getRangeAt(0);
+      }
+    } catch (e) {}
+  }
+
+  // 2. Try window.getSelection().getComposedRanges() (W3C standard in Safari 17+, Chrome)
+  const sel = window.getSelection ? window.getSelection() : null;
+  if (!range && sel && typeof sel.getComposedRanges === 'function' && root) {
+    try {
+      const composed = sel.getComposedRanges({ shadowRoots: [root] });
+      if (composed && composed.length > 0) {
+        range = composed[0];
+      }
+    } catch (e) {}
+  }
+
+  // 3. Fallback to standard window.getSelection()
+  if (!range && sel && sel.rangeCount > 0) {
+    try {
+      range = sel.getRangeAt(0);
+    } catch (e) {}
+  }
+
+  if (range) {
+    const container = isStart ? range.startContainer : range.endContainer;
+    const offset = isStart ? range.startOffset : range.endOffset;
+    const pos = getOffsetInElement(el, container, offset);
+    if (pos !== null) {
+      el._lastCaretOffset = pos;
+      return pos;
+    }
+  }
+
+  return typeof el._lastCaretOffset === 'number' ? el._lastCaretOffset : 0;
+}
+
+/**
+ * Sets the caret or selection character range inside a contenteditable element.
+ *
+ * @param {HTMLElement} el
+ * @param {number} start
+ * @param {number} [end]
+ */
+export function setCaretCharacterOffset(el, start, end = start) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+  const textNode = getSingleTextNode(el);
+  const len = (textNode.textContent || '').length;
+  const s = Math.max(0, Math.min(start ?? 0, len));
+  const e = Math.max(0, Math.min(end ?? s, len));
+
+  el._lastCaretOffset = s;
+
+  const root = typeof el.getRootNode === 'function' ? el.getRootNode() : null;
+  const sel = (root && typeof root.getSelection === 'function') ? root.getSelection() : window.getSelection();
+  if (!sel) return;
+
+  // setBaseAndExtent works natively across WebKit, Gecko, and Blink
+  if (typeof sel.setBaseAndExtent === 'function') {
+    try {
+      sel.setBaseAndExtent(textNode, s, textNode, e);
+      return;
+    } catch (err) {}
+  }
+
+  try {
+    const range = document.createRange();
+    range.setStart(textNode, s);
+    range.setEnd(textNode, e);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  } catch (err) {}
+}
+
+/**
+ * Ensures the element has exactly one child Text node and returns it.
+ *
+ * @param {HTMLElement} el
+ * @returns {Text}
+ */
+export function getSingleTextNode(el) {
+  if (!el.firstChild) {
+    const tn = document.createTextNode('');
+    el.appendChild(tn);
+    return tn;
+  }
+
+  if (el.childNodes.length === 1 && el.firstChild.nodeType === 3) {
+    return el.firstChild;
+  }
+
+  el.normalize();
+  if (el.childNodes.length === 1 && el.firstChild.nodeType === 3) {
+    return el.firstChild;
+  }
+
+  // Strip elements (<br>, <div>) inserted by contenteditable
+  const text = el.textContent || '';
+  el.textContent = text;
+  return el.firstChild || el.appendChild(document.createTextNode(''));
+}
+
+/**
+ * Configures an HTMLElement as a contenteditable input adapter.
+ *
+ * @param {HTMLElement} el
+ * @param {HTMLElement} host
+ * @returns {HTMLElement}
+ */
+export function setupContentEditableAdapter(el, host) {
+  el._lastCaretOffset = 0;
+
+  // 1. Enforce plaintext-only editing (Firefox falls back to true)
+  el.setAttribute('contenteditable', 'plaintext-only');
+  if (el.contentEditable !== 'plaintext-only') {
+    el.setAttribute('contenteditable', 'true');
+  }
+
+  // 2. Track caret offset on mouse click, pointer, keyboard, and selection interactions
+  const updateCaret = (e) => {
+    if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
+      const offset = getCaretOffsetFromPoint(el, e.clientX, e.clientY);
+      if (offset !== null) {
+        el._lastCaretOffset = offset;
+        return;
+      }
+    }
+    const fromSel = getCaretCharacterOffset(el, true);
+    if (typeof fromSel === 'number') {
+      el._lastCaretOffset = fromSel;
+    }
+  };
+
+  el.addEventListener('pointerdown', updateCaret);
+  el.addEventListener('mousedown', updateCaret);
+  el.addEventListener('pointerup', updateCaret);
+  el.addEventListener('mouseup', updateCaret);
+  el.addEventListener('click', updateCaret);
+  el.addEventListener('keyup', updateCaret);
+
+  if (typeof document !== 'undefined') {
+    const onSelectionChange = () => {
+      const root = typeof el.getRootNode === 'function' ? el.getRootNode() : null;
+      const activeEl = root && root.activeElement ? root.activeElement : document.activeElement;
+      if (activeEl === el || el.contains(activeEl)) {
+        const offset = getCaretCharacterOffset(el, true);
+        if (typeof offset === 'number') {
+          el._lastCaretOffset = offset;
+        }
+      }
+    };
+    document.addEventListener('selectionchange', onSelectionChange);
+  }
+
+  // 3. Prevent linebreaks on Enter (single-line input behavior)
+  el.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  });
+
+  // 5. Strip linebreaks from pasted content
+  el.addEventListener('paste', (e) => {
+    e.preventDefault();
+    const clipboard = e.clipboardData || window.clipboardData;
+    const text = (clipboard?.getData('text/plain') || '').replace(/\r?\n/g, ' ');
+    if (text) {
+      if (typeof document.execCommand === 'function') {
+        document.execCommand('insertText', false, text);
+      } else {
+        const start = el.selectionStart;
+        const current = el.textContent || '';
+        el.textContent = current.slice(0, start) + text + current.slice(el.selectionEnd);
+        setCaretCharacterOffset(el, start + text.length);
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  });
+
+  // 6. Clean empty element so :empty matches data-placeholder
+  el.addEventListener('input', () => {
+    if (!el.textContent) {
+      el.replaceChildren();
+      el._lastCaretOffset = 0;
+    } else {
+      el._lastCaretOffset = getCaretCharacterOffset(el, true);
+    }
+  });
+
+  // 7. Define HTMLInputElement-compatible properties and methods
+  Object.defineProperty(el, 'value', {
+    get() {
+      return el.textContent || '';
+    },
+    set(val) {
+      const next = val || '';
+      if (el.textContent !== next) {
+        el.textContent = next;
+        el._lastCaretOffset = Math.min(el._lastCaretOffset || 0, next.length);
+      }
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'placeholder', {
+    get() {
+      return el.getAttribute('data-placeholder') || '';
+    },
+    set(val) {
+      if (val) {
+        el.setAttribute('data-placeholder', val);
+      } else {
+        el.removeAttribute('data-placeholder');
+      }
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'disabled', {
+    get() {
+      return el.hasAttribute('disabled') || el.contentEditable === 'false';
+    },
+    set(val) {
+      if (val) {
+        el.setAttribute('disabled', '');
+        el.setAttribute('contenteditable', 'false');
+      } else {
+        el.removeAttribute('disabled');
+        el.setAttribute('contenteditable', 'plaintext-only');
+        if (el.contentEditable !== 'plaintext-only') {
+          el.setAttribute('contenteditable', 'true');
+        }
+      }
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'readOnly', {
+    get() {
+      return el.contentEditable === 'false';
+    },
+    set(val) {
+      if (val) {
+        el.setAttribute('contenteditable', 'false');
+      } else {
+        el.setAttribute('contenteditable', 'plaintext-only');
+        if (el.contentEditable !== 'plaintext-only') {
+          el.setAttribute('contenteditable', 'true');
+        }
+      }
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'selectionStart', {
+    get() {
+      return getCaretCharacterOffset(el, true);
+    },
+    set(val) {
+      const currentEnd = getCaretCharacterOffset(el, false);
+      const nextEnd = Math.max(val, currentEnd);
+      setCaretCharacterOffset(el, val, nextEnd);
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'selectionEnd', {
+    get() {
+      return getCaretCharacterOffset(el, false);
+    },
+    set(val) {
+      const currentStart = getCaretCharacterOffset(el, true);
+      const nextStart = Math.min(val, currentStart);
+      setCaretCharacterOffset(el, nextStart, val);
+    },
+    configurable: true,
+  });
+
+  Object.defineProperty(el, 'selectionDirection', {
+    value: 'forward',
+    writable: true,
+    configurable: true,
+  });
+
+  el.setSelectionRange = function (start, end) {
+    setCaretCharacterOffset(el, start, end);
+  };
+
+  el.select = function () {
+    setCaretCharacterOffset(el, 0, (el.textContent || '').length);
+  };
+
+  el.updateCaretFromPoint = function (clientX, clientY) {
+    if (typeof clientX === 'number' && typeof clientY === 'number') {
+      const offset = getCaretOffsetFromPoint(el, clientX, clientY);
+      if (offset !== null) {
+        el._lastCaretOffset = offset;
+        return el._lastCaretOffset;
+      }
+    }
+    const offset = getCaretCharacterOffset(el, true);
+    if (typeof offset === 'number') {
+      el._lastCaretOffset = offset;
+    }
+    return el._lastCaretOffset;
+  };
+
+  // 8. createValueRange implementation returning a standard DOM Range over the text node
+  el.createValueRange = function (start, end) {
+    const textNode = getSingleTextNode(el);
+    const len = (textNode.textContent || '').length;
+    const s = Math.max(0, Math.min(start ?? 0, len));
+    const e = Math.max(0, Math.min(end ?? s, len));
+
+    const range = new Range();
+    range.setStart(textNode, s);
+    range.setEnd(textNode, e);
+    range.disconnect = () => {};
+    return range;
+  };
+
+  el.checkValidity = () => true;
+  el.reportValidity = () => true;
+  el.validity = { valid: true };
+  el.validationMessage = '';
+
+  return el;
+}

package/utils/highlights.js

@@ -35,7 +35,7 @@ class HighlightRegistryManager {
   }
 
   syncAll() {
-    if (!isHighlightSupported || !isOpaqueRangeSupported) return;
+    if (!isHighlightSupported) return;
 
     // Aggregate ranges across all active instances
     const rangesByKeyword = new Map();
@@ -65,35 +65,55 @@ class HighlightRegistryManager {
 
     // 1. Set/update individual keyword highlights (e.g. ::highlight(label))
     for (const kw of this.registeredKeywords) {
-      const ranges = rangesByKeyword.get(kw);
-      if (ranges && ranges.length > 0) {
+      const ranges = rangesByKeyword.get(kw) || [];
+      let hl = CSS.highlights.get(kw);
+      if (!hl) {
         try {
-          CSS.highlights.set(kw, new Highlight(...ranges));
-        } catch (e) {
-          console.warn(`[rich-input] Failed to register highlight for "${kw}":`, e);
+          hl = new Highlight();
+          CSS.highlights.set(kw, hl);
+        } catch (e) {}
+      }
+      if (hl) {
+        hl.clear();
+        for (const r of ranges) {
+          try {
+            hl.add(r);
+          } catch (e) {}
         }
-      } else {
-        CSS.highlights.delete(kw);
       }
     }
 
     // 2. Set generic highlights
-    if (allKeywordRanges.length > 0) {
+    let kwHl = CSS.highlights.get('rich-input-keyword');
+    if (!kwHl) {
       try {
-        const kwHl = new Highlight(...allKeywordRanges);
+        kwHl = new Highlight();
         CSS.highlights.set('rich-input-keyword', kwHl);
       } catch (e) {}
-    } else {
-      CSS.highlights.delete('rich-input-keyword');
+    }
+    if (kwHl) {
+      kwHl.clear();
+      for (const r of allKeywordRanges) {
+        try {
+          kwHl.add(r);
+        } catch (e) {}
+      }
     }
 
-    if (allValueRanges.length > 0) {
+    let valHl = CSS.highlights.get('rich-input-value');
+    if (!valHl) {
       try {
-        const valHl = new Highlight(...allValueRanges);
+        valHl = new Highlight();
         CSS.highlights.set('rich-input-value', valHl);
       } catch (e) {}
-    } else {
-      CSS.highlights.delete('rich-input-value');
+    }
+    if (valHl) {
+      valHl.clear();
+      for (const r of allValueRanges) {
+        try {
+          valHl.add(r);
+        } catch (e) {}
+      }
     }
   }
 }

package/utils/positioning.js

@@ -1,8 +1,108 @@
 /**
  * Caret measurement and popover positioning for <rich-input>
- * Uses OpaqueRange.getBoundingClientRect() with input fallback.
+ * Uses OpaqueRange.getBoundingClientRect() with hidden mirror div fallback.
  */
 
+import { isOpaqueRangeSupported } from './highlights.js';
+
+let mirrorDiv = null;
+
+/**
+ * Gets or creates the reusable hidden mirror div for measuring text width in the input.
+ * @returns {HTMLDivElement|null}
+ */
+function getMirrorDiv() {
+  if (typeof document === 'undefined') return null;
+
+  if (!mirrorDiv || !mirrorDiv.isConnected) {
+    mirrorDiv = document.createElement('div');
+    mirrorDiv.id = 'rich-input-mirror';
+    mirrorDiv.setAttribute('aria-hidden', 'true');
+    mirrorDiv.style.position = 'absolute';
+    mirrorDiv.style.top = '-9999px';
+    mirrorDiv.style.left = '-9999px';
+    mirrorDiv.style.visibility = 'hidden';
+    mirrorDiv.style.pointerEvents = 'none';
+    mirrorDiv.style.whiteSpace = 'pre';
+    mirrorDiv.style.display = 'inline-block';
+    mirrorDiv.style.width = 'auto';
+    mirrorDiv.style.height = 'auto';
+    mirrorDiv.style.margin = '0';
+    mirrorDiv.style.padding = '0';
+    mirrorDiv.style.border = '0';
+    (document.body || document.documentElement).appendChild(mirrorDiv);
+  }
+
+  return mirrorDiv;
+}
+
+/**
+ * Fallback measurement using a hidden mirror div for browsers that don't support OpaqueRange.
+ * Sets the div's text content to the input's partial text (or full text) up to the target
+ * character offset to figure out the left position to use for the popover.
+ *
+ * @param {HTMLInputElement} input
+ * @param {number|OpaqueRange} [target] Character offset or range
+ * @returns {number} Viewport-relative left position in pixels
+ */
+export function getCaretLeftWithMirrorDiv(input, target) {
+  const inputRect = input.getBoundingClientRect();
+  const value = input.value || '';
+
+  // Determine character offset
+  let offset = value.length;
+  if (typeof target === 'number') {
+    offset = target;
+  } else if (target && typeof target.startOffset === 'number') {
+    offset = target.startOffset;
+  } else if (typeof input.selectionStart === 'number') {
+    offset = input.selectionStart;
+  }
+  offset = Math.max(0, Math.min(offset, value.length));
+
+  // Input's text or partial text up to target offset
+  const textContent = value.slice(0, offset);
+
+  const mirror = getMirrorDiv();
+  if (!mirror) {
+    return inputRect.left;
+  }
+
+  // Copy computed font and text layout styles from the input
+  const computed = window.getComputedStyle(input);
+  mirror.style.fontFamily = computed.fontFamily;
+  mirror.style.fontSize = computed.fontSize;
+  mirror.style.fontWeight = computed.fontWeight;
+  mirror.style.fontStyle = computed.fontStyle;
+  mirror.style.fontVariant = computed.fontVariant;
+  mirror.style.fontStretch = computed.fontStretch;
+  mirror.style.letterSpacing = computed.letterSpacing;
+  mirror.style.wordSpacing = computed.wordSpacing;
+  mirror.style.textTransform = computed.textTransform;
+  mirror.style.textIndent = computed.textIndent;
+  mirror.style.direction = computed.direction;
+
+  // Set the text content of the hidden div
+  mirror.textContent = textContent;
+
+  const textWidth = mirror.getBoundingClientRect().width;
+  const isRtl = computed.direction === 'rtl';
+
+  let left;
+  if (isRtl) {
+    const borderRight = parseFloat(computed.borderRightWidth) || 0;
+    const paddingRight = parseFloat(computed.paddingRight) || 0;
+    left = inputRect.right - borderRight - paddingRight - textWidth + (input.scrollLeft || 0);
+  } else {
+    const borderLeft = parseFloat(computed.borderLeftWidth) || 0;
+    const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+    left = inputRect.left + borderLeft + paddingLeft + textWidth - (input.scrollLeft || 0);
+  }
+
+  // Clamp within input bounds
+  return Math.max(inputRect.left, Math.min(left, inputRect.right));
+}
+
 /**
  * Gets caret or range coordinates relative to viewport.
  * Accepts either an OpaqueRange instance or a character offset number.
@@ -12,6 +112,22 @@
  */
 export function getCaretCoordinates(input, target) {
   const inputRect = input.getBoundingClientRect();
+
+  // For browsers that don't support OpaqueRange to position the popover,
+  // do the trick with a hidden div and setting its text contents to the input's
+  // text (or partial text) to figure out the left position to use for the popover.
+  if (!isOpaqueRangeSupported) {
+    const left = getCaretLeftWithMirrorDiv(input, target);
+    return {
+      left,
+      top: inputRect.top,
+      bottom: inputRect.bottom,
+      height: inputRect.height,
+      isCaret: false,
+    };
+  }
+
+  // When OpaqueRange is supported, use native OpaqueRange measurement
   let rect = null;
   let tempRange = null;
 
@@ -77,6 +193,11 @@ export const getRangeCoordinates = getCaretCoordinates;
 export function positionPopover(popover, caretCoords, inputElement) {
   if (!popover) return;
 
+  if (!caretCoords && inputElement) {
+    caretCoords = getCaretCoordinates(inputElement);
+  }
+  if (!caretCoords) return;
+
   const popoverWidth = popover.offsetWidth || 280;
   const popoverHeight = popover.offsetHeight || 220;