v1.2.1 (2026.09.14)

Version 1.2.1:

• Only do suggestions based on the full string, not the substring up to the cursor’s position

Check it out at https://rich-input.netlify.app/

v1.2.0 (2026.09.14)

Version 1.2.0:

• Add support for highlighting invalid values for a specific keyword.
• Add support for highlighting invalid keyword:value entries.

Check it out at https://rich-input.netlify.app/

v1.1.1 (2026.09.14)

Version 1.1.1:

• Deal with collapsed ranges (Safari Bugfix)

Check it out at https://rich-input.netlify.app/

v1.1.0 (2026.09.14)

Version 1.1.0:

• Add fallback with hidden mirror-div for browsers with no OpaqueRange support
• Add fallback using Custom Highlights on a [contendeditable] for browsers with no OpaqueRange support

Check it out at https://rich-input.netlify.app/

v1.0.0 (2026.09.14)

First release!

• Standard Input Ergonomics: Acts and feels like a regular <input type="text"> with standard value access, selection ranges, and events.
• 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.
• 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.

Check it out at https://rich-input.netlify.app/