bramus / rich-input

# rich-input
> A rich input field ` ` with keyword-based autocomplete and in-input highlighting powered by ` `, the **OpaqueRange API**, and the **CSS Custom Highlight API**.
The ` ` component is a rich input field that acts like a standard ` ` so users can type ordinary text or search terms, but enhances it with contextual autocomplete and in-input highlighting for structured queries with `keyword:value` filters, prefix `operators` (e.g. `-`), boolean `combinators` (e.g. `AND`, `OR`), and grouping `delimiters` (e.g. `()`), such as `(label:"We Play House Recordings" OR year:2026) AND -style:"Acid House"`.
---
## Features
- **Standard Input Ergonomics**: Acts and feels like a regular ` ` with standard value access, selection ranges, and events.
- **Contextual Autocomplete**:
 - **Keywords**: Typing at the start of a token or after an operator/delimiter (e.g. typing `a` or `-s`) suggests configured keywords like `artist:` and `-style:`.
 - **Combinators**: Typing a configured boolean combinator (e.g. `A` or `O` when `combinators="AND OR"` is set) suggests `AND` and `OR`.
 - **Values**: Typing within a keyword value (e.g. `label:"K` or `label:K`) suggests matching options like `"Keinemusik"` and `"Kranky"`.
- **Configurable Operators, Combinators & Delimiters**: Configure prefix operators (`operators="- ~ +"`), boolean combinators (`combinators="AND OR NOT"`), and grouping delimiter pairs (`delimiters="() [] {}"`) per instance via HTML attributes / JS properties, or globally via static properties on `RichInput`.
- **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, operators, combinators, delimiters, and invalid tokens inside the ` ` control using standard CSS rules like `::highlight(label)`, `::highlight(rich-input-operator)`, `::highlight(rich-input-combinator)`, and `::highlight(rich-input-delimiter)` without brittle mirror-div overlays.
- **Declarative Configuration via ` `**: Configure keywords and options purely in HTML by nesting standard ` ` elements with ` ` tags inside ` `.
- **Rich Option Markup**: Embed custom HTML markup (such as logos, images, icons, and avatars) directly inside ` ` elements for rich, visual suggestion popovers.
- **Form Associated**: Implements `static formAssociated = true` and `ElementInternals` to participate seamlessly in ` ` 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