Introducing <​rich-input>, a GitHub-like search/filter text input to embed on your site

Screenshot of <rich-input> in action ~ While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aphex Twin” or label:“Warp Records” — You know, like the one you see on GitHub when searching/filtering issues. When I quickly realized a standalone custom element for this didn’t exist yet, I nerd sniped myself into building curating one. ~ # The need for a rich search input If you have ever used search fields on GitHub, Gmail, or modern music databases, you know the pattern: you can type regular free-text words, but you can also narrow things down using structured key:value pairs. For my record collection side-project, I wanted exactly that kind of search engine-grade filter intelligence. Screenshot of GitHub’s rich search/filter field showing the User popover you get after having typed author: I wanted to be able to type queries such…