My first attempt was a popup layer that allows searching, and clicking an item in the layer would accept it, where it would be added into the parent layer.

I only use an overlay if the "tag" is a structured record that is more complicated to find or create. E.g. when I need paginated search results, or when creating the tag involves a form with multiple fields and validations.

Curious to know if there are more elegant solutions.

For standard multi-selects I'm using one of the many JavaScript based select replacements, and mount them from a compiler. There are some many intricate details in regards to styling, keyboard input, etc. that I don't want to reinvent this unless I need a very custom solution.

I'm not familiar with the Calcite Design System you linked, but e.g. with Tom Select I would have HTML like this:

<select class="combo-box" multiple></select>

I mount TomSelect like this:

new TomSelect('.combo-box',{
  create: true,
  load: async (query, callback) => {
    let results = up.request('/tags?query=' + encodeURIComponent(query))
    callback(results.json)
  }
});

The /tags endpoint returns JSON with matching tags like this:

[
  { "text": "matching-tag1", "value": "123" },
  { "text": "matching-tag2", "value": "124" }
]