lucos_search_component 4.0.0 → 4.0.2

package/CLAUDE.md

@@ -0,0 +1,7 @@
+# lucos_search_component
+
+## Public interface changes
+
+Any change to the public interface of this component (new attributes, modified attribute behaviour, removed attributes) must be accompanied by a new or updated example in `example/index.html`.
+
+For **breaking changes** (removing or renaming an attribute, changing the expected format of an existing attribute), also review all existing examples in `example/index.html` to check whether any need updating or removing entirely.

package/README.md

@@ -36,6 +36,7 @@ The following attributes can be added to the lucos-search span:
 * **data-label-override-zxx** — Override the displayed label for the `https://eolas.l42.eu/metadata/language/zxx/` entry in both the dropdown and selected lozenge. Has no effect on whether `zxx` appears in the list — that depends on whether `zxx` is present in the search index. Only meaningful when `data-types="Language"`.
 * **data-common** — A comma separated list of item URIs to pin in a "Common" group at the top of the list, above the normal results. Only meaningful when `data-types="Language"`.
 * **data-preload** — If present, all options are loaded upfront rather than fetched on search. Suitable for small, finite datasets such as languages.
+* **data-create** — Boolean presence attribute. When present, enables inline creation of new entities: if the user types a name with no matching arachne result, they can pick "Add new `<type>`: `<name>`…" from the dropdown. On form submit, the created entry is serialised as a name-only value (`[name]` set, `[uri]` omitted) so the consumer can route it to a create-on-write path. **Opt-in per instance** — controlled-vocabulary fields (e.g. language, offence) must not set this; only open entity types (e.g. Person) should allow inline creation. The `[uri]` + `[name]` serialisation for existing arachne-selected entries is unaffected.
 
 #### Language selector
 

package/dist/index.js

@@ -5691,17 +5691,18 @@ TomSelect.define('virtual_scroll', plugin);
 
 var tomSelectStylesheet = "/**\n * tom-select.css (v2.6.1)\n * Copyright (c) contributors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use this\n * file except in compliance with the License. You may obtain a copy of the License at:\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF\n * ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n *\n */\n.ts-control {\n  border: 1px solid #d0d0d0;\n  padding: 8px 8px;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);\n}\n.full .ts-control {\n  background-color: #fff;\n}\n.disabled .ts-control, .disabled .ts-control * {\n  cursor: default !important;\n}\n.focus .ts-control {\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n.ts-control > * {\n  vertical-align: baseline;\n  display: inline-block;\n}\n.ts-wrapper.multi .ts-control > div {\n  cursor: pointer;\n  margin: 0 3px 3px 0;\n  padding: 2px 6px;\n  background: #1da7ee;\n  color: #fff;\n  border: 1px solid #0073bb;\n  overflow: auto;\n}\n.ts-wrapper.multi .ts-control > div.active {\n  background: #92c836;\n  color: #fff;\n  border: 1px solid #00578d;\n}\n.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {\n  color: hsl(0, 0%, 130%);\n  background: #d2d2d2;\n  border: 1px solid #aaaaaa;\n}\n.ts-control > input {\n  flex: 1 1 auto;\n  min-width: 7rem;\n  display: inline-block !important;\n  padding: 0 !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  text-indent: 0 !important;\n  border: 0 none !important;\n  background: none !important;\n  line-height: inherit !important;\n  -webkit-user-select: auto !important;\n     -moz-user-select: auto !important;\n      -ms-user-select: auto !important;\n          user-select: auto !important;\n  box-shadow: none !important;\n}\n.ts-control > input::-ms-clear {\n  display: none;\n}\n.ts-control > input:focus {\n  outline: none !important;\n}\n.has-items .ts-control > input {\n  margin: 0px 4px !important;\n}\n.ts-control.rtl {\n  text-align: right;\n}\n.ts-control.rtl.single .ts-control:after {\n  left: 15px;\n  right: auto;\n}\n.ts-control.rtl .ts-control > input {\n  margin: 0px 4px 0px -2px !important;\n}\n.disabled .ts-control {\n  opacity: 0.5;\n  background-color: #fafafa;\n}\n.input-hidden .ts-control > input {\n  opacity: 0;\n  position: absolute;\n  left: -10000px;\n}\n\n.ts-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  border: 1px solid #d0d0d0;\n  background: #fff;\n  margin: 0.25rem 0 0;\n  border-top: 0 none;\n  box-sizing: border-box;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  border-radius: 0 0 3px 3px;\n}\n.ts-dropdown [data-selectable] {\n  cursor: pointer;\n  overflow: hidden;\n}\n.ts-dropdown [data-selectable] .highlight {\n  background: rgba(125, 168, 208, 0.2);\n  border-radius: 1px;\n}\n.ts-dropdown .option,\n.ts-dropdown .optgroup-header,\n.ts-dropdown .no-results,\n.ts-dropdown .create {\n  padding: 5px 8px;\n}\n.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {\n  cursor: inherit;\n  opacity: 0.5;\n}\n.ts-dropdown [data-selectable].option {\n  opacity: 1;\n  cursor: pointer;\n}\n.ts-dropdown .optgroup:first-child .optgroup-header {\n  border-top: 0 none;\n}\n.ts-dropdown .optgroup-header {\n  color: #303030;\n  background: #fff;\n  cursor: default;\n}\n.ts-dropdown .active {\n  background-color: #f5fafd;\n  color: #495c68;\n}\n.ts-dropdown .active.create {\n  color: #495c68;\n}\n.ts-dropdown .create {\n  color: rgba(48, 48, 48, 0.5);\n}\n.ts-dropdown .spinner {\n  display: inline-block;\n  width: 30px;\n  height: 30px;\n  margin: 5px 8px;\n}\n.ts-dropdown .spinner::after {\n  content: \" \";\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 5px solid #d0d0d0;\n  border-color: #d0d0d0 transparent #d0d0d0 transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ts-dropdown-content {\n  overflow: hidden auto;\n  max-height: 200px;\n  scroll-behavior: smooth;\n}\n\n.ts-wrapper.plugin-drag_drop .ts-dragging {\n  color: transparent !important;\n}\n.ts-wrapper.plugin-drag_drop .ts-dragging > * {\n  visibility: hidden !important;\n}\n\n.plugin-checkbox_options:not(.rtl) .option input {\n  margin-right: 0.5rem;\n}\n\n.plugin-checkbox_options.rtl .option input {\n  margin-left: 0.5rem;\n}\n\n/* stylelint-disable function-name-case */\n.plugin-clear_button {\n  --ts-pr-clear-button: 1em;\n}\n.plugin-clear_button .clear-button {\n  opacity: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: calc(8px - 6px);\n  margin-right: 0 !important;\n  background: transparent !important;\n  transition: opacity 0.5s;\n  cursor: pointer;\n}\n.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {\n  right: max(var(--ts-pr-caret), 8px);\n}\n.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {\n  opacity: 1;\n}\n\n.ts-wrapper .dropdown-header {\n  position: relative;\n  padding: 10px 8px;\n  border-bottom: 1px solid #d0d0d0;\n  background: color-mix(#fff, #d0d0d0, 85%);\n  border-radius: 3px 3px 0 0;\n}\n.ts-wrapper .dropdown-header-close {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  color: #303030;\n  opacity: 0.4;\n  margin-top: -12px;\n  line-height: 20px;\n  font-size: 20px !important;\n}\n.ts-wrapper .dropdown-header-close:hover {\n  color: hsl(0, 0%, -6.1764705882%);\n}\n\n.plugin-dropdown_input.focus.dropdown-active .ts-control {\n  box-shadow: none;\n  border: 1px solid #d0d0d0;\n}\n.plugin-dropdown_input .dropdown-input {\n  border: 1px solid #d0d0d0;\n  border-width: 0 0 1px;\n  display: block;\n  padding: 8px 8px;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  width: 100%;\n  background: transparent;\n}\n.plugin-dropdown_input .items-placeholder {\n  border: 0 none !important;\n  box-shadow: none !important;\n  width: 100%;\n}\n.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {\n  display: none !important;\n}\n\n.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {\n  min-width: 0;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {\n  flex: none;\n  min-width: 4px;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {\n  color: transparent;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {\n  color: transparent;\n}\n\n.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {\n  display: flex;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup {\n  border-right: 1px solid #f2f2f2;\n  border-top: 0 none;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-width: 0;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {\n  border-right: 0 none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup::before {\n  display: none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup-header {\n  border-top: 0 none;\n}\n\n.ts-wrapper.plugin-remove_button .item {\n  display: inline-flex;\n  align-items: center;\n}\n.ts-wrapper.plugin-remove_button .item .remove {\n  color: inherit;\n  text-decoration: none;\n  vertical-align: middle;\n  display: inline-block;\n  padding: 0 6px;\n  border-radius: 0 2px 2px 0;\n  box-sizing: border-box;\n}\n.ts-wrapper.plugin-remove_button .item .remove:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {\n  background: none;\n}\n.ts-wrapper.plugin-remove_button .remove-single {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 23px;\n}\n\n.ts-wrapper.plugin-remove_button:not(.rtl) .item {\n  padding-right: 0 !important;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {\n  border-left: 1px solid #0073bb;\n  margin-left: 6px;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {\n  border-left-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {\n  border-left-color: #aaaaaa;\n}\n\n.ts-wrapper.plugin-remove_button.rtl .item {\n  padding-left: 0 !important;\n}\n.ts-wrapper.plugin-remove_button.rtl .item .remove {\n  border-right: 1px solid #0073bb;\n  margin-right: 6px;\n}\n.ts-wrapper.plugin-remove_button.rtl .item.active .remove {\n  border-right-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {\n  border-right-color: #aaaaaa;\n}\n\n:root {\n  --ts-pr-clear-button: 0px;\n  --ts-pr-caret: 0px;\n  --ts-pr-min: .75rem;\n}\n\n.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {\n  cursor: pointer;\n}\n\n.ts-control:not(.rtl) {\n  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-control.rtl {\n  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-wrapper {\n  position: relative;\n}\n\n.ts-dropdown,\n.ts-control,\n.ts-control input {\n  color: #303030;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 18px;\n}\n\n.ts-control,\n.ts-wrapper.single.input-active .ts-control {\n  background: #fff;\n  cursor: text;\n}\n\n.ts-hidden-accessible {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n          clip-path: inset(50%) !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n.ts-wrapper.single .ts-control {\n  --ts-pr-caret: 2rem;\n}\n.ts-wrapper.single .ts-control::after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 50%;\n  margin-top: -3px;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 5px 5px 0 5px;\n  border-color: #808080 transparent transparent transparent;\n}\n.ts-wrapper.single .ts-control:not(.rtl)::after {\n  right: 15px;\n}\n.ts-wrapper.single .ts-control.rtl::after {\n  left: 15px;\n}\n.ts-wrapper.single.dropdown-active .ts-control::after {\n  margin-top: -4px;\n  border-width: 0 5px 5px 5px;\n  border-color: transparent transparent #808080 transparent;\n}\n.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {\n  cursor: text;\n}\n\n.ts-wrapper {\n  display: flex;\n  min-height: 36px;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding-left: 5px;\n  --ts-pr-min: 5px;\n}\n.ts-wrapper.multi .ts-control [data-value] {\n  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);\n  border-radius: 3px;\n  background-color: color-mix(#1da7ee, #178ee9, 60%);\n  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);\n  background-repeat: repeat-x;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);\n}\n.ts-wrapper.multi .ts-control [data-value].active {\n  background-color: color-mix(#008fd8, #0075cf, 60%);\n  background-image: linear-gradient(to bottom, #008fd8, #0075cf);\n  background-repeat: repeat-x;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] {\n  color: #999;\n  text-shadow: none;\n  background: none;\n  box-shadow: none;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value], .ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  border-color: #e6e6e6;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  background: none;\n}\n.ts-wrapper.single .ts-control {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);\n  background-color: color-mix(#fefefe, #f2f2f2, 60%);\n  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);\n  background-repeat: repeat-x;\n}\n\n.ts-wrapper.single .ts-control, .ts-dropdown.single {\n  border-color: #b8b8b8;\n}\n\n.dropdown-active .ts-control {\n  border-radius: 3px 3px 0 0;\n}\n\n.ts-dropdown .optgroup-header {\n  padding-top: 7px;\n  font-weight: bold;\n  font-size: 0.85em;\n}\n.ts-dropdown .optgroup {\n  border-top: 1px solid #f0f0f0;\n}\n.ts-dropdown .optgroup:first-child {\n  border-top: 0 none;\n}\n/*# sourceMappingURL=tom-select.default.css.map */";
 
-var categoryColoursCSS = "/* Generated by scripts/generate-colours.js — do not edit by hand */\n/* Run `npm run build` to regenerate from the eolas categories endpoint */\n\n.lozenge[data-category=\"People\"] {\n\t--lozenge-background: #044E00;\n\t--lozenge-border: #033100;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Anthropological\"] {\n\t--lozenge-background: #8affe7;\n\t--lozenge-border: #068900;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Anthropogeographical\"] {\n\t--lozenge-background: #aed0db;\n\t--lozenge-border: #3f6674;\n\t--lozenge-text: #0c1a1b;\n}\n\n.lozenge[data-category=\"Musical\"] {\n\t--lozenge-background: #000060;\n\t--lozenge-border: #000020;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Aquatic\"] {\n\t--lozenge-background: #0085fe;\n\t--lozenge-border: #0036b1;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Terrestrial\"] {\n\t--lozenge-background: #652c17;\n\t--lozenge-border: #321200;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Cosmic\"] {\n\t--lozenge-background: #15163a;\n\t--lozenge-border: #000000;\n\t--lozenge-text: #feffe8;\n}\n\n.lozenge[data-category=\"Supernatural\"] {\n\t--lozenge-background: #f1ff5f;\n\t--lozenge-border: #674800;\n\t--lozenge-text: #352005;\n}\n\n.lozenge[data-category=\"Historical\"] {\n\t--lozenge-background: #740909;\n\t--lozenge-border: #470202;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Temporal\"] {\n\t--lozenge-background: #fffc33;\n\t--lozenge-border: #7f7e00;\n\t--lozenge-text: #0f0f00;\n}\n\n.lozenge[data-category=\"Mathematical\"] {\n\t--lozenge-background: #f53b0e;\n\t--lozenge-border: #7e3d2e;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Technological\"] {\n\t--lozenge-background: #c70f7a;\n\t--lozenge-border: #8f125b;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Meteorological\"] {\n\t--lozenge-background: #ffffff;\n\t--lozenge-border: #333333;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Meta\"] {\n\t--lozenge-background: #4a5568;\n\t--lozenge-border: #2d3748;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Dramaturgical\"] {\n\t--lozenge-background: #5f0086;\n\t--lozenge-border: #59007d;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Literary\"] {\n\t--lozenge-background: #a22400;\n\t--lozenge-border: #5e1500;\n\t--lozenge-text: #ffffff;\n}\n";
+var categoryColoursCSS = "/* Generated by scripts/generate-colours.js — do not edit by hand */\n/* Run `npm run build` to regenerate from the eolas categories endpoint */\n\n.lozenge[data-category=\"People\"] {\n\t--lozenge-background: #044E00;\n\t--lozenge-border: #033100;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Anthropological\"] {\n\t--lozenge-background: #8affe7;\n\t--lozenge-border: #068900;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Advisory\"] {\n\t--lozenge-background: #010102;\n\t--lozenge-border: #000020;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Anthropogeographical\"] {\n\t--lozenge-background: #aed0db;\n\t--lozenge-border: #3f6674;\n\t--lozenge-text: #0c1a1b;\n}\n\n.lozenge[data-category=\"Musical\"] {\n\t--lozenge-background: #000060;\n\t--lozenge-border: #000020;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Aquatic\"] {\n\t--lozenge-background: #0085fe;\n\t--lozenge-border: #0036b1;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Terrestrial\"] {\n\t--lozenge-background: #652c17;\n\t--lozenge-border: #321200;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Cosmic\"] {\n\t--lozenge-background: #15163a;\n\t--lozenge-border: #000000;\n\t--lozenge-text: #feffe8;\n}\n\n.lozenge[data-category=\"Supernatural\"] {\n\t--lozenge-background: #f1ff5f;\n\t--lozenge-border: #674800;\n\t--lozenge-text: #352005;\n}\n\n.lozenge[data-category=\"Historical\"] {\n\t--lozenge-background: #740909;\n\t--lozenge-border: #470202;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Temporal\"] {\n\t--lozenge-background: #fffc33;\n\t--lozenge-border: #7f7e00;\n\t--lozenge-text: #0f0f00;\n}\n\n.lozenge[data-category=\"Mathematical\"] {\n\t--lozenge-background: #f53b0e;\n\t--lozenge-border: #7e3d2e;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Technological\"] {\n\t--lozenge-background: #c70f7a;\n\t--lozenge-border: #8f125b;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Meteorological\"] {\n\t--lozenge-background: #ffffff;\n\t--lozenge-border: #333333;\n\t--lozenge-text: #000000;\n}\n\n.lozenge[data-category=\"Meta\"] {\n\t--lozenge-background: #4a5568;\n\t--lozenge-border: #2d3748;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Dramaturgical\"] {\n\t--lozenge-background: #5f0086;\n\t--lozenge-border: #59007d;\n\t--lozenge-text: #ffffff;\n}\n\n.lozenge[data-category=\"Literary\"] {\n\t--lozenge-background: #a22400;\n\t--lozenge-border: #5e1500;\n\t--lozenge-text: #ffffff;\n}\n";
 
 /**
  * Builds a Typesense filter_by expression from the search component's filter attributes.
  *
- * @param {string|null} types       - Value of data-types attribute (e.g. "Person,Place")
- * @param {string|null} excludeTypes - Value of data-exclude-types attribute (e.g. "Language")
- * @param {string|null} isContact   - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} types          - Value of data-types attribute (e.g. "Person,Place")
+ * @param {string|null} excludeTypes   - Value of data-exclude-types attribute (e.g. "Language")
+ * @param {string|null} isContact      - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} allowedOrigins - Value of data-allowed-origins attribute (e.g. "https://eolas.l42.eu")
  * @returns {string|null} filter expression, or null if no filters apply
  */
-function buildFilterBy(types, excludeTypes, isContact) {
+function buildFilterBy(types, excludeTypes, isContact, allowedOrigins) {
 	const parts = [];
 	if (types) {
 		parts.push(`types:=[${types}]`);
@@ -5713,12 +5714,45 @@ function buildFilterBy(types, excludeTypes, isContact) {
 	} else if (isContact === 'false') {
 		parts.push('is_contact:=false');
 	}
+	if (allowedOrigins) {
+		parts.push(`origin:=[${allowedOrigins}]`);
+	}
 	return parts.length > 0 ? parts.join(' && ') : null;
 }
 
+/**
+ * Build formData key/value pairs for a lucos-search field.
+ *
+ * Arachne-selected entries emit both [uri] and [name]; created entries (tagged
+ * with option.created = true) emit [name] only so consumers can route them to a
+ * create-on-write path without a URI.
+ *
+ * @param {string} name - The field name (from select.name)
+ * @param {string|string[]} values - Selected TomSelect values (ts.getValue())
+ * @param {Object} optionMap - TomSelect options map (ts.options)
+ * @returns {Array<[string, string]>} Array of [key, value] pairs to append to FormData
+ */
+function buildFormDataEntries(name, values, optionMap) {
+	const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+	const entries = [];
+	valueArray.forEach((id, idx) => {
+		const option = optionMap[id];
+		if (!option) return;
+		if (option.created) {
+			// Created (no arachne match) entry: name only, no URI
+			entries.push([`${name}[${idx}][name]`, option.pref_label]);
+		} else {
+			// Arachne-selected entry: URI + name
+			entries.push([`${name}[${idx}][uri]`, id]);
+			entries.push([`${name}[${idx}][name]`, option.pref_label]);
+		}
+	});
+	return entries;
+}
+
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload'];
+		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create','data-allowed-origins'];
 	}
 	constructor() {
 		super();
@@ -5810,6 +5844,18 @@ class LucosSearchComponent extends HTMLSpanElement {
 				color: inherit;
 				text-decoration: none;
 			}
+
+			/* Pre-save visual indicator for unsaved created entries.
+			 * Cream background distinguishes from both the default unknown-category grey (#555)
+			 * and the white used by the Meteorological category.
+			 * border-style !important needed to override TomSelect's base border shorthand. */
+			.lozenge.lozenge-pending {
+				--lozenge-background: #fffbea;
+				--lozenge-border: #999999;
+				--lozenge-text: #333333;
+				border-style: dashed !important;
+				font-style: italic;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
@@ -5820,8 +5866,33 @@ class LucosSearchComponent extends HTMLSpanElement {
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
+
+		// Derive a noun for the "Add new <type>: <name>" create prompt when data-types is a single type
+		function getCreateNoun() {
+			const dataTypes = component.getAttribute("data-types");
+			if (!dataTypes) return null;
+			const types = dataTypes.split(",").map(t => t.trim()).filter(Boolean);
+			return types.length === 1 ? types[0] : null;
+		}
+
+		if (component.hasAttribute("data-create")) {
+			const createTypes = component.getAttribute("data-types");
+			const createTypeList = createTypes ? createTypes.split(",").map(t => t.trim()).filter(Boolean) : [];
+			if (createTypeList.length > 1) {
+				console.warn(
+					`lucos-search: data-create is set alongside data-types="${createTypes}" which specifies ${createTypeList.length} types. ` +
+					`Server-side there will be no way to determine which type to create — data-create should only be used with a single data-types value.`
+				);
+			}
+		}
+
 		new TomSelect(selector, {
 			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
+			...(component.hasAttribute("data-create") ? {
+				create: function(input) {
+					return { id: input, pref_label: input, created: true };
+				},
+			} : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
@@ -5867,6 +5938,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					component.getAttribute("data-types"),
 					component.getAttribute("data-exclude_types"),
 					component.getAttribute("data-is-contact"),
+					component.getAttribute("data-allowed-origins"),
 				);
 				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
@@ -5945,6 +6017,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 						component.getAttribute("data-types"),
 						component.getAttribute("data-exclude_types"),
 						component.getAttribute("data-is-contact"),
+						component.getAttribute("data-allowed-origins"),
 					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
@@ -5984,8 +6057,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				}
 			},
 			onItemSelect: function (item) {
-				// Tom-select prevents clicking on link in an item to work as normal, so force it here
-				window.open(item.dataset.value, '_blank').focus();
+				// Tom-select prevents clicking on link in an item to work as normal, so force it here.
+				// Skip navigation for created (unsaved) entries — they have no arachne URI.
+				const value = item.dataset.value;
+				const option = this.options[value];
+				if (option && option.created) return;
+				window.open(value, '_blank').focus();
 			},
 			render:{
 				option: function(data, escape) {
@@ -6016,8 +6093,19 @@ class LucosSearchComponent extends HTMLSpanElement {
 					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
 						? zxxOverride
 						: data.pref_label;
+					// Created (unsaved) entries: no URI to link to, render with pending indicator
+					if (data.created) {
+						return `<div class="lozenge lozenge-pending" data-type="" data-category="">${escape(displayLabel)}</div>`;
+					}
 					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
+				option_create: function(data, escape) {
+					const noun = getCreateNoun();
+					if (noun) {
+						return `<div class="create">Add new ${escape(noun)}: <strong>${escape(data.input)}</strong>&hellip;</div>`;
+					}
+					return `<div class="create">Add <strong>${escape(data.input)}</strong>&hellip;</div>`;
+				},
 			},
 		});
 
@@ -6092,16 +6180,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 			const ts = selector.tomselect;
 			if (!ts) return;
 			const name = selector.name;
-			const values = ts.getValue();
-			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
 			// Remove the native select values so consumers only receive the structured pairs
 			event.formData.delete(name);
-			valueArray.forEach((id, idx) => {
-				const option = ts.options[id];
-				if (option) {
-					event.formData.append(`${name}[${idx}][uri]`, id);
-					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
-				}
+			buildFormDataEntries(name, ts.getValue(), ts.options).forEach(([key, value]) => {
+				event.formData.append(key, value);
 			});
 		};
 		form.addEventListener('formdata', this._formdataHandler);

package/example/index.html

@@ -19,6 +19,7 @@
 		<label for="search6">Languages with label override for zxx:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search6"></select></span>
 		<label for="search7">Languages with zxx pre-selected:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search7" multiple><option selected>https://eolas.l42.eu/metadata/language/zxx/</option></select></span>
 		<label for="search11">Languages with label override, common and preload:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="Instrumental / No Language" data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/" data-preload><select id="search11" multiple ></select></span>
+		<label for="search_origins">Eolas only (data-allowed-origins):</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-allowed-origins="https://eolas.l42.eu"><select id="search_origins"></select></span>
 		<label for="search5">More than 10:</label>
 		<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
 			<option selected>https://eolas.l42.eu/metadata/place/125/</option>
@@ -61,6 +62,13 @@
 			<button type="submit">Submit</button>
 		</form>
 		<pre id="form-output"></pre>
+		<h1>Inline create (data-create)</h1>
+		<p>Person field with <code>data-create</code>: type a name with no match and pick "Add new Person: …" to create a new entry. Created entries render with a cream dashed lozenge and serialise as <code>[name]</code>-only (no <code>[uri]</code>) on submit.</p>
+		<form id="create-form" onsubmit="handleCreateSubmit(event)">
+			<label for="composer">Composer:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Person" data-create><select id="composer" name="composer" multiple></select></span>
+			<button type="submit">Submit</button>
+		</form>
+		<pre id="create-output"></pre>
 		<script>
 			function handleSubmit(event) {
 				event.preventDefault();
@@ -72,6 +80,16 @@
 				}
 				document.getElementById('form-output').textContent = JSON.stringify(output, null, 2);
 			}
+			function handleCreateSubmit(event) {
+				event.preventDefault();
+				const data = new FormData(event.target);
+				const output = {};
+				for (const [key, value] of data.entries()) {
+					if (!output[key]) output[key] = [];
+					output[key].push(value);
+				}
+				document.getElementById('create-output').textContent = JSON.stringify(output, null, 2);
+			}
 		</script>
 		<script src="./built.js"></script>
 	</body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/test/filter.test.mjs

@@ -31,3 +31,23 @@ test('data-exclude-types produces types:!= filter', () => {
 	const result = buildFilterBy(null, 'Track', null);
 	assert.equal(result, 'types:!=[Track]');
 });
+
+test('data-allowed-origins produces origin:= filter', () => {
+	const result = buildFilterBy(null, null, null, 'https://eolas.l42.eu');
+	assert.equal(result, 'origin:=[https://eolas.l42.eu]');
+});
+
+test('data-allowed-origins with multiple comma-separated origins', () => {
+	const result = buildFilterBy(null, null, null, 'https://eolas.l42.eu,https://contacts.l42.eu');
+	assert.equal(result, 'origin:=[https://eolas.l42.eu,https://contacts.l42.eu]');
+});
+
+test('data-allowed-origins combines with data-types', () => {
+	const result = buildFilterBy('Person', null, null, 'https://eolas.l42.eu');
+	assert.equal(result, 'types:=[Person] && origin:=[https://eolas.l42.eu]');
+});
+
+test('absent data-allowed-origins produces no origin filter', () => {
+	const result = buildFilterBy('Person', null, null, null);
+	assert.equal(result, 'types:=[Person]');
+});

package/test/form-serialise.test.mjs

@@ -0,0 +1,111 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildFormDataEntries } from '../web-components/form-serialise.js';
+
+// --- Arachne-selected entries ---
+
+test('arachne-selected entry emits [uri] and [name]', () => {
+	const options = {
+		'https://eolas.l42.eu/people/1': { pref_label: 'John Lennon', id: 'https://eolas.l42.eu/people/1' },
+	};
+	const entries = buildFormDataEntries('composer', 'https://eolas.l42.eu/people/1', options);
+	assert.deepEqual(entries, [
+		['composer[0][uri]', 'https://eolas.l42.eu/people/1'],
+		['composer[0][name]', 'John Lennon'],
+	]);
+});
+
+test('arachne-selected entry with multiple values uses contiguous indices', () => {
+	const options = {
+		'https://eolas.l42.eu/people/1': { pref_label: 'John Lennon', id: 'https://eolas.l42.eu/people/1' },
+		'https://eolas.l42.eu/people/2': { pref_label: 'Paul McCartney', id: 'https://eolas.l42.eu/people/2' },
+	};
+	const entries = buildFormDataEntries(
+		'composer',
+		['https://eolas.l42.eu/people/1', 'https://eolas.l42.eu/people/2'],
+		options,
+	);
+	assert.deepEqual(entries, [
+		['composer[0][uri]', 'https://eolas.l42.eu/people/1'],
+		['composer[0][name]', 'John Lennon'],
+		['composer[1][uri]', 'https://eolas.l42.eu/people/2'],
+		['composer[1][name]', 'Paul McCartney'],
+	]);
+});
+
+// --- Created entries ---
+
+test('created entry emits [name] only, no [uri]', () => {
+	const options = {
+		'Ringo Starr': { pref_label: 'Ringo Starr', id: 'Ringo Starr', created: true },
+	};
+	const entries = buildFormDataEntries('composer', 'Ringo Starr', options);
+	assert.deepEqual(entries, [
+		['composer[0][name]', 'Ringo Starr'],
+	]);
+	// Confirm [uri] is absent
+	const keys = entries.map(([k]) => k);
+	assert.ok(!keys.includes('composer[0][uri]'), 'uri key must not be present for created entries');
+});
+
+// --- Mixed entries ---
+
+test('mixed created and arachne-selected entries serialise with contiguous indices and correct shapes', () => {
+	const options = {
+		'https://eolas.l42.eu/people/1': { pref_label: 'John Lennon', id: 'https://eolas.l42.eu/people/1' },
+		'George Harrison': { pref_label: 'George Harrison', id: 'George Harrison', created: true },
+		'https://eolas.l42.eu/people/3': { pref_label: 'Paul McCartney', id: 'https://eolas.l42.eu/people/3' },
+	};
+	const entries = buildFormDataEntries(
+		'composer',
+		['https://eolas.l42.eu/people/1', 'George Harrison', 'https://eolas.l42.eu/people/3'],
+		options,
+	);
+	assert.deepEqual(entries, [
+		['composer[0][uri]', 'https://eolas.l42.eu/people/1'],
+		['composer[0][name]', 'John Lennon'],
+		['composer[1][name]', 'George Harrison'],                   // created — name only
+		['composer[2][uri]', 'https://eolas.l42.eu/people/3'],
+		['composer[2][name]', 'Paul McCartney'],
+	]);
+});
+
+// --- Edge cases ---
+
+test('no values produces no entries', () => {
+	const entries = buildFormDataEntries('composer', [], {});
+	assert.deepEqual(entries, []);
+});
+
+test('empty string values produces no entries', () => {
+	const entries = buildFormDataEntries('composer', '', {});
+	assert.deepEqual(entries, []);
+});
+
+test('null values produces no entries', () => {
+	const entries = buildFormDataEntries('composer', null, {});
+	assert.deepEqual(entries, []);
+});
+
+test('value with no matching option is silently skipped', () => {
+	// Matches the existing behaviour: unknown value keys are ignored
+	const options = {
+		'https://eolas.l42.eu/people/1': { pref_label: 'John Lennon', id: 'https://eolas.l42.eu/people/1' },
+	};
+	const entries = buildFormDataEntries(
+		'composer',
+		['https://eolas.l42.eu/people/1', 'https://eolas.l42.eu/people/99'],
+		options,
+	);
+	// Only the known option contributes entries; index gaps are absent (idx 0 only)
+	assert.deepEqual(entries, [
+		['composer[0][uri]', 'https://eolas.l42.eu/people/1'],
+		['composer[0][name]', 'John Lennon'],
+	]);
+});
+
+test('field name is preserved verbatim in keys', () => {
+	const options = { 'https://example.com/1': { pref_label: 'Test', id: 'https://example.com/1' } };
+	const entries = buildFormDataEntries('my_field_name', 'https://example.com/1', options);
+	assert.ok(entries.every(([k]) => k.startsWith('my_field_name[')));
+});

package/web-components/filter.js

@@ -1,12 +1,13 @@
 /**
  * Builds a Typesense filter_by expression from the search component's filter attributes.
  *
- * @param {string|null} types       - Value of data-types attribute (e.g. "Person,Place")
- * @param {string|null} excludeTypes - Value of data-exclude-types attribute (e.g. "Language")
- * @param {string|null} isContact   - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} types          - Value of data-types attribute (e.g. "Person,Place")
+ * @param {string|null} excludeTypes   - Value of data-exclude-types attribute (e.g. "Language")
+ * @param {string|null} isContact      - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} allowedOrigins - Value of data-allowed-origins attribute (e.g. "https://eolas.l42.eu")
  * @returns {string|null} filter expression, or null if no filters apply
  */
-export function buildFilterBy(types, excludeTypes, isContact) {
+export function buildFilterBy(types, excludeTypes, isContact, allowedOrigins) {
 	const parts = [];
 	if (types) {
 		parts.push(`types:=[${types}]`);
@@ -18,5 +19,8 @@ export function buildFilterBy(types, excludeTypes, isContact) {
 	} else if (isContact === 'false') {
 		parts.push('is_contact:=false');
 	}
+	if (allowedOrigins) {
+		parts.push(`origin:=[${allowedOrigins}]`);
+	}
 	return parts.length > 0 ? parts.join(' && ') : null;
 }

package/web-components/form-serialise.js

@@ -0,0 +1,29 @@
+/**
+ * Build formData key/value pairs for a lucos-search field.
+ *
+ * Arachne-selected entries emit both [uri] and [name]; created entries (tagged
+ * with option.created = true) emit [name] only so consumers can route them to a
+ * create-on-write path without a URI.
+ *
+ * @param {string} name - The field name (from select.name)
+ * @param {string|string[]} values - Selected TomSelect values (ts.getValue())
+ * @param {Object} optionMap - TomSelect options map (ts.options)
+ * @returns {Array<[string, string]>} Array of [key, value] pairs to append to FormData
+ */
+export function buildFormDataEntries(name, values, optionMap) {
+	const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+	const entries = [];
+	valueArray.forEach((id, idx) => {
+		const option = optionMap[id];
+		if (!option) return;
+		if (option.created) {
+			// Created (no arachne match) entry: name only, no URI
+			entries.push([`${name}[${idx}][name]`, option.pref_label]);
+		} else {
+			// Arachne-selected entry: URI + name
+			entries.push([`${name}[${idx}][uri]`, id]);
+			entries.push([`${name}[${idx}][name]`, option.pref_label]);
+		}
+	});
+	return entries;
+}

package/web-components/lucos-search.js

@@ -2,10 +2,11 @@ import TomSelect from 'tom-select';
 import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
 import categoryColoursCSS from './generated/category-colours.css';
 import { buildFilterBy } from './filter.js';
+import { buildFormDataEntries } from './form-serialise.js';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload'];
+		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create','data-allowed-origins'];
 	}
 	constructor() {
 		super();
@@ -97,6 +98,18 @@ class LucosSearchComponent extends HTMLSpanElement {
 				color: inherit;
 				text-decoration: none;
 			}
+
+			/* Pre-save visual indicator for unsaved created entries.
+			 * Cream background distinguishes from both the default unknown-category grey (#555)
+			 * and the white used by the Meteorological category.
+			 * border-style !important needed to override TomSelect's base border shorthand. */
+			.lozenge.lozenge-pending {
+				--lozenge-background: #fffbea;
+				--lozenge-border: #999999;
+				--lozenge-text: #333333;
+				border-style: dashed !important;
+				font-style: italic;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
@@ -107,8 +120,33 @@ class LucosSearchComponent extends HTMLSpanElement {
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
+
+		// Derive a noun for the "Add new <type>: <name>" create prompt when data-types is a single type
+		function getCreateNoun() {
+			const dataTypes = component.getAttribute("data-types");
+			if (!dataTypes) return null;
+			const types = dataTypes.split(",").map(t => t.trim()).filter(Boolean);
+			return types.length === 1 ? types[0] : null;
+		}
+
+		if (component.hasAttribute("data-create")) {
+			const createTypes = component.getAttribute("data-types");
+			const createTypeList = createTypes ? createTypes.split(",").map(t => t.trim()).filter(Boolean) : [];
+			if (createTypeList.length > 1) {
+				console.warn(
+					`lucos-search: data-create is set alongside data-types="${createTypes}" which specifies ${createTypeList.length} types. ` +
+					`Server-side there will be no way to determine which type to create — data-create should only be used with a single data-types value.`
+				);
+			}
+		}
+
 		new TomSelect(selector, {
 			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
+			...(component.hasAttribute("data-create") ? {
+				create: function(input) {
+					return { id: input, pref_label: input, created: true };
+				},
+			} : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
@@ -154,6 +192,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					component.getAttribute("data-types"),
 					component.getAttribute("data-exclude_types"),
 					component.getAttribute("data-is-contact"),
+					component.getAttribute("data-allowed-origins"),
 				);
 				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
@@ -232,6 +271,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 						component.getAttribute("data-types"),
 						component.getAttribute("data-exclude_types"),
 						component.getAttribute("data-is-contact"),
+						component.getAttribute("data-allowed-origins"),
 					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
@@ -271,8 +311,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				}
 			},
 			onItemSelect: function (item) {
-				// Tom-select prevents clicking on link in an item to work as normal, so force it here
-				window.open(item.dataset.value, '_blank').focus();
+				// Tom-select prevents clicking on link in an item to work as normal, so force it here.
+				// Skip navigation for created (unsaved) entries — they have no arachne URI.
+				const value = item.dataset.value;
+				const option = this.options[value];
+				if (option && option.created) return;
+				window.open(value, '_blank').focus();
 			},
 			render:{
 				option: function(data, escape) {
@@ -303,8 +347,19 @@ class LucosSearchComponent extends HTMLSpanElement {
 					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
 						? zxxOverride
 						: data.pref_label;
+					// Created (unsaved) entries: no URI to link to, render with pending indicator
+					if (data.created) {
+						return `<div class="lozenge lozenge-pending" data-type="" data-category="">${escape(displayLabel)}</div>`;
+					}
 					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
+				option_create: function(data, escape) {
+					const noun = getCreateNoun();
+					if (noun) {
+						return `<div class="create">Add new ${escape(noun)}: <strong>${escape(data.input)}</strong>&hellip;</div>`;
+					}
+					return `<div class="create">Add <strong>${escape(data.input)}</strong>&hellip;</div>`;
+				},
 			},
 		});
 
@@ -379,16 +434,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 			const ts = selector.tomselect;
 			if (!ts) return;
 			const name = selector.name;
-			const values = ts.getValue();
-			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
 			// Remove the native select values so consumers only receive the structured pairs
 			event.formData.delete(name);
-			valueArray.forEach((id, idx) => {
-				const option = ts.options[id];
-				if (option) {
-					event.formData.append(`${name}[${idx}][uri]`, id);
-					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
-				}
+			buildFormDataEntries(name, ts.getValue(), ts.options).forEach(([key, value]) => {
+				event.formData.append(key, value);
 			});
 		};
 		form.addEventListener('formdata', this._formdataHandler);