lucos_search_component 3.0.1 → 3.0.3

package/.circleci/config.yml

@@ -2,11 +2,27 @@ version: 2.1
 orbs:
   lucos: lucos/deploy@0
 
+jobs:
+  test:
+    docker:
+      - image: node:22-alpine
+    steps:
+      - checkout
+      - run:
+          name: Install Dependencies
+          command: npm ci
+      - run:
+          name: Run Tests
+          command: npm test
+
 workflows:
   version: 2
   release:
     jobs:
+      - test
       - lucos/release-npm:
+          requires:
+            - test
           filters:
             branches:
               only: main

package/.github/dependabot.yml

@@ -3,7 +3,7 @@ updates:
   - package-ecosystem: npm
     directory: /
     schedule:
-      interval: daily
+      interval: weekly
       time: '06:00'
     open-pull-requests-limit: 10
     allow:

package/.github/workflows/code-reviewer-auto-merge.yml

@@ -13,7 +13,7 @@ permissions:
 
 jobs:
   reusable:
-    uses: lucas42/.github/.github/workflows/reusable-code-reviewer-auto-merge.yml@v1.18.0
+    uses: lucas42/.github/.github/workflows/reusable-code-reviewer-auto-merge.yml@v1.19.0
     secrets:
       LUCOS_CI_APP_ID: ${{ secrets.LUCOS_CI_APP_ID }}
       LUCOS_CI_PRIVATE_KEY: ${{ secrets.LUCOS_CI_PRIVATE_KEY }}

package/.github/workflows/convention-check.yml

@@ -9,4 +9,4 @@ permissions:
 
 jobs:
   convention-check:
-    uses: lucas42/.github/.github/workflows/reusable-convention-check.yml@v1.18.0
+    uses: lucas42/.github/.github/workflows/reusable-convention-check.yml@v1.19.0

package/.github/workflows/dependabot-auto-merge.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   dependabot:
-    uses: lucas42/.github/.github/workflows/reusable-dependabot-auto-merge.yml@v1.18.0
+    uses: lucas42/.github/.github/workflows/reusable-dependabot-auto-merge.yml@v1.19.0
     secrets:
       LUCOS_CI_APP_ID: ${{ secrets.LUCOS_CI_APP_ID }}
       LUCOS_CI_PRIVATE_KEY: ${{ secrets.LUCOS_CI_PRIVATE_KEY }}

package/README.md

@@ -32,6 +32,7 @@ The following attributes can be added to the lucos-search span:
 * **data-api-key** \[required\] — a valid API key for the production instance of [lucos_arachne](https://github.com/lucas42/lucos_arachne), as generated by [lucos_creds](https://github.com/lucas42/lucos_creds).
 * **data-types** — A comma separated list of item types to search for (defaults to all types).
 * **data-exclude-types** — A comma separated list of item types to exclude from the search (ignored if `data-types` is set).
+* **data-is-contact** — Filter results to contacts only (`"true"`) or non-contacts only (`"false"`). Omitting the attribute applies no filter. Composes with `data-types` when both are set.
 * **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.

package/dist/index.js

@@ -1654,9 +1654,10 @@ function getSettings(input, settings_user) {
      *
      */
     var init_textbox = () => {
+        var _a, _b;
         const data_raw = input.getAttribute(attr_data);
         if (!data_raw) {
-            var value = input.value.trim() || '';
+            var value = (_b = (_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
             if (!settings.allowEmptyOption && !value.length)
                 return;
             const values = value.split(settings.delimiter);
@@ -1966,15 +1967,6 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         self.close(false);
         self.inputState();
         self.isSetup = true;
-        if (input.disabled) {
-            self.disable();
-        }
-        else if (input.readOnly) {
-            self.setReadOnly(true);
-        }
-        else {
-            self.enable(); //sets tabIndex
-        }
         self.on('change', this.onChange);
         addClasses$2(input, 'tomselected', 'ts-hidden-accessible');
         self.trigger('initialize');
@@ -2075,6 +2067,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         const settings = get_settings ? getSettings(self.input, { delimiter: self.settings.delimiter, allowEmptyOption: self.settings.allowEmptyOption }) : self.settings;
         self.setupOptions(settings.options, settings.optgroups);
         self.setValue(settings.items || [], true); // silent prevents recursion
+        if (self.input.disabled) {
+            self.disable();
+        }
+        else if (self.input.readOnly) {
+            self.setReadOnly(true);
+        }
+        else {
+            self.enable(); //sets tabIndex
+        }
+        self.lastQuery = null; // so updated options will be displayed in dropdown
     }
     /**
      * Triggered when the main control element
@@ -2724,15 +2726,19 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         if (self.isDisabled || self.isReadOnly)
             return;
         self.ignoreFocus = true;
-        if (self.control_input.offsetWidth) {
-            self.control_input.focus();
-        }
-        else {
-            self.focus_node.focus();
-        }
+        const focusTarget = this.control_input.offsetWidth ? this.control_input : this.focus_node;
+        focusTarget.focus();
         setTimeout(() => {
             self.ignoreFocus = false;
-            self.onFocus();
+            // Fix https://github.com/orchidjs/tom-select/issues/806
+            // Only proceed if this instance's element is still the active element. If Edge autofill
+            // (or anything else) has moved focus to a different element in the interim, calling
+            // onFocus() here would steal focus back and restart the cascade loop.
+            const root = focusTarget.getRootNode();
+            if (root.activeElement !== focusTarget) {
+                return;
+            }
+            this.onFocus();
         }, 0);
     }
     /**
@@ -3977,7 +3983,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4026,7 +4032,7 @@ function plugin$d () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4203,7 +4209,7 @@ function plugin$c (userOptions) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4277,7 +4283,7 @@ function plugin$b (userOptions) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4495,7 +4501,7 @@ function plugin$a () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4595,7 +4601,7 @@ function plugin$9 (userOptions) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4756,7 +4762,7 @@ function plugin$8 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4978,7 +4984,7 @@ function plugin$7 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5050,7 +5056,7 @@ function plugin$6 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5080,7 +5086,7 @@ function plugin$5 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5104,7 +5110,7 @@ function plugin$4 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5188,7 +5194,7 @@ function plugin$3 () {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5320,7 +5326,7 @@ function plugin$2 (userOptions) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5360,7 +5366,7 @@ function plugin$1 (userOptions) {
 }
 
 /**
-* Tom Select v2.6.0
+* Tom Select v2.6.1
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5468,6 +5474,8 @@ function plugin () {
   var loading_more = false;
   var load_more_opt;
   var default_values = [];
+  var default_values_loaded = false;
+  var default_pagination;
   if (!self.settings.shouldLoadMore) {
     // return true if additional results should be loaded
     self.settings.shouldLoadMore = () => {
@@ -5567,6 +5575,16 @@ function plugin () {
       }
     }
     orig_loadCallback.call(self, options, optgroups);
+
+    // After the initial preload (empty query), update default_values to include
+    // preloaded options, not just the HTML <option> elements captured on initialize
+    if (!loading_more && !default_values_loaded) {
+      default_values_loaded = true;
+      if (self.lastValue === '') {
+        default_values = Object.keys(self.options);
+        default_pagination = pagination[''];
+      }
+    }
     loading_more = false;
   });
 
@@ -5604,6 +5622,24 @@ function plugin () {
     }
   });
 
+  // Restore preloaded options and pagination when clearing search
+  const restoreDefaults = () => {
+    if (!default_values_loaded) {
+      return;
+    }
+    self.clearOptions(clearFilter);
+    if (default_pagination) {
+      pagination[''] = default_pagination;
+    }
+  };
+  self.on('type', query => {
+    if (query === '') {
+      restoreDefaults();
+      self.refreshOptions(false);
+    }
+  });
+  self.on('dropdown_close', restoreDefaults);
+
   // add scroll listener and default templates
   self.on('initialize', () => {
     default_values = Object.keys(self.options);
@@ -5653,11 +5689,36 @@ TomSelect.define('remove_button', plugin$2);
 TomSelect.define('restore_on_backspace', plugin$1);
 TomSelect.define('virtual_scroll', plugin);
 
-var tomSelectStylesheet = "/**\n * tom-select.css (v2.6.0)\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: white;\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: black;\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 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";
+
+/**
+ * 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")
+ * @returns {string|null} filter expression, or null if no filters apply
+ */
+function buildFilterBy(types, excludeTypes, isContact) {
+	const parts = [];
+	if (types) {
+		parts.push(`type:=[${types}]`);
+	} else if (excludeTypes) {
+		parts.push(`type:!=[${excludeTypes}]`);
+	}
+	if (isContact === 'true') {
+		parts.push('is_contact:=true');
+	} else if (isContact === 'false') {
+		parts.push('is_contact:=false');
+	}
+	return parts.length > 0 ? parts.join(' && ') : null;
+}
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types','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'];
 	}
 	constructor() {
 		super();
@@ -5706,82 +5767,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				border-left-color: var(--lozenge-border) !important;
 			}
 
-			/* Default colour to greys, but override based on category */
+			/* Default colour to greys for unknown categories */
 			.lozenge {
 				--lozenge-background: #555;
 				--lozenge-border: #6d6d6d;
 				--lozenge-text: #fff;
 			}
-			.lozenge[data-category="Musical"] {
-				--lozenge-background: #000060;
-				--lozenge-border: #000020;
-			}
-			.lozenge[data-category="People"] {
-				--lozenge-background: #044E00;
-				--lozenge-border: #033100;
-			}
-			.lozenge[data-category="Aquatic"] {
-				--lozenge-background: #0085fe;
-				--lozenge-border: #0036b1;
-			}
-			.lozenge[data-category="Terrestrial"] {
-				--lozenge-background: #652c17;
-				--lozenge-border: #321200;
-			}
-			.lozenge[data-category="Cosmic"] {
-				--lozenge-background: #15163a;
-				--lozenge-border: #000000;
-				--lozenge-text: #feffe8;
-			}
-			.lozenge[data-category="Anthropogeographical"] {
-				--lozenge-background: #aed0db;
-				--lozenge-border: #3f6674;
-				--lozenge-text: #0c1a1b;
-			}
-			.lozenge[data-category="Supernatural"] {
-				--lozenge-background: #f1ff5f;
-				--lozenge-border: #674800;
-				--lozenge-text: #352005;
-			}
-			.lozenge[data-category="Historical"] {
-				--lozenge-background: #740909;
-				--lozenge-border: #470202;
-			}
-			.lozenge[data-category="Mathematical"] {
-				--lozenge-background: #f53b0e;
-				--lozenge-border: #7e3d2e;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Temporal"] {
-				--lozenge-background: #fffc33;
-				--lozenge-border: #7f7e00;
-				--lozenge-text: #0f0f00;
-			}
-			.lozenge[data-category="Anthropological"] {
-				--lozenge-background: #8affe7;
-				--lozenge-border: #068900;
-				--lozenge-text: #000000;
-			}
-			.lozenge[data-category="Technological"] {
-				--lozenge-background: #c70f7a;
-				--lozenge-border: #8f125b;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Meteorological"] {
-				--lozenge-background: #fff;
-				--lozenge-border: #333;
-				--lozenge-text: #000;
-			}
-			.lozenge[data-category="Literary"] {
-				--lozenge-background: #a22400;
-				--lozenge-border: #5e1500;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Dramaturgical"] {
-				--lozenge-background: #5f0086;
-				--lozenge-border: #59007d;
-				--lozenge-text: #fff;
-			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;
@@ -5800,6 +5791,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 		`;
 		shadow.appendChild(mainStyle);
 
+		const categoryColourStyle = document.createElement('style');
+		categoryColourStyle.textContent = categoryColoursCSS;
+		shadow.appendChild(categoryColourStyle);
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
@@ -5847,11 +5841,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				const queryParams = new URLSearchParams({
 					q: query,
 				});
-				if (component.getAttribute("data-types")) {
-					queryParams.set("filter_by",`type:=[${component.getAttribute("data-types")}]`);
-				} else if (component.getAttribute("data-exclude_types")) {
-					queryParams.set("filter_by",`type:!=[${component.getAttribute("data-exclude_types")}]`);
-				}
+				const filterBy = buildFilterBy(
+					component.getAttribute("data-types"),
+					component.getAttribute("data-exclude_types"),
+					component.getAttribute("data-is-contact"),
+				);
+				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
 					let results = await component.searchRequest(queryParams, abortController.signal);
 					if (abortController.signal.aborted) return;
@@ -5924,11 +5919,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 				}
 				// Preload all matching options (after groups are registered so options slot correctly)
 				if (component.hasAttribute("data-preload")) {
-					const filterValue = component.getAttribute("data-types")
-						? `type:=[${component.getAttribute("data-types")}]`
-						: component.getAttribute("data-exclude_types")
-							? `type:!=[${component.getAttribute("data-exclude_types")}]`
-							: null;
+					const filterValue = buildFilterBy(
+						component.getAttribute("data-types"),
+						component.getAttribute("data-exclude_types"),
+						component.getAttribute("data-is-contact"),
+					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
 					if (filterValue) preloadParams.set("filter_by", filterValue);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "lucos_search_component",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "node --test test/*.test.mjs",
     "example": "source .env && KEY_LUCOS_ARACHNE=$KEY_LUCOS_ARACHNE envsubst < example/index.html > example/built.html && npm run build && webpack -c example/webpack.config.js && open example/built.html",
-    "build": "rollup -c"
+    "build": "node scripts/generate-colours.js && rollup -c"
   },
   "repository": {
     "type": "git",

package/scripts/generate-colours.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * Fetches category colour data from eolas and writes the generated CSS file
+ * used by lucos-search.js.  Run automatically as the first step of `npm run build`.
+ */
+
+import { writeFileSync, mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const OUTPUT_FILE = join(__dirname, '..', 'web-components', 'generated', 'category-colours.css');
+const EOLAS_URL = 'https://eolas.l42.eu/metadata/categories.json';
+
+async function main() {
+	console.log(`Fetching category colours from ${EOLAS_URL} ...`);
+	const response = await fetch(EOLAS_URL);
+	if (!response.ok) {
+		throw new Error(`Failed to fetch category colours: HTTP ${response.status}`);
+	}
+	const categories = await response.json();
+
+	const cssLines = [
+		'/* Generated by scripts/generate-colours.js — do not edit by hand */',
+		'/* Run `npm run build` to regenerate from the eolas categories endpoint */',
+		'',
+	];
+
+	for (const { name, background, border, text } of categories) {
+		cssLines.push(`.lozenge[data-category="${name}"] {`);
+		cssLines.push(`\t--lozenge-background: ${background};`);
+		cssLines.push(`\t--lozenge-border: ${border};`);
+		cssLines.push(`\t--lozenge-text: ${text};`);
+		cssLines.push('}');
+		cssLines.push('');
+	}
+
+	mkdirSync(dirname(OUTPUT_FILE), { recursive: true });
+	writeFileSync(OUTPUT_FILE, cssLines.join('\n'));
+	console.log(`Written ${OUTPUT_FILE} (${categories.length} categories)`);
+}
+
+main().catch(err => {
+	console.error(`Error generating category colours: ${err.message}`);
+	process.exit(1);
+});

package/test/filter.test.mjs

@@ -0,0 +1,23 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildFilterBy } from '../web-components/filter.js';
+
+test('data-is-contact="true" produces is_contact:=true filter', () => {
+	const result = buildFilterBy(null, null, 'true');
+	assert.equal(result, 'is_contact:=true');
+});
+
+test('data-is-contact="false" produces is_contact:=false filter', () => {
+	const result = buildFilterBy(null, null, 'false');
+	assert.equal(result, 'is_contact:=false');
+});
+
+test('omitting data-is-contact produces no is_contact filter', () => {
+	const result = buildFilterBy(null, null, null);
+	assert.equal(result, null);
+});
+
+test('data-is-contact combines correctly with data-types', () => {
+	const result = buildFilterBy('Person', null, 'true');
+	assert.equal(result, 'type:=[Person] && is_contact:=true');
+});

package/web-components/filter.js

@@ -0,0 +1,22 @@
+/**
+ * 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")
+ * @returns {string|null} filter expression, or null if no filters apply
+ */
+export function buildFilterBy(types, excludeTypes, isContact) {
+	const parts = [];
+	if (types) {
+		parts.push(`type:=[${types}]`);
+	} else if (excludeTypes) {
+		parts.push(`type:!=[${excludeTypes}]`);
+	}
+	if (isContact === 'true') {
+		parts.push('is_contact:=true');
+	} else if (isContact === 'false') {
+		parts.push('is_contact:=false');
+	}
+	return parts.length > 0 ? parts.join(' && ') : null;
+}

package/web-components/lucos-search.js

@@ -1,9 +1,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';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types','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'];
 	}
 	constructor() {
 		super();
@@ -52,82 +54,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				border-left-color: var(--lozenge-border) !important;
 			}
 
-			/* Default colour to greys, but override based on category */
+			/* Default colour to greys for unknown categories */
 			.lozenge {
 				--lozenge-background: #555;
 				--lozenge-border: #6d6d6d;
 				--lozenge-text: #fff;
 			}
-			.lozenge[data-category="Musical"] {
-				--lozenge-background: #000060;
-				--lozenge-border: #000020;
-			}
-			.lozenge[data-category="People"] {
-				--lozenge-background: #044E00;
-				--lozenge-border: #033100;
-			}
-			.lozenge[data-category="Aquatic"] {
-				--lozenge-background: #0085fe;
-				--lozenge-border: #0036b1;
-			}
-			.lozenge[data-category="Terrestrial"] {
-				--lozenge-background: #652c17;
-				--lozenge-border: #321200;
-			}
-			.lozenge[data-category="Cosmic"] {
-				--lozenge-background: #15163a;
-				--lozenge-border: #000000;
-				--lozenge-text: #feffe8;
-			}
-			.lozenge[data-category="Anthropogeographical"] {
-				--lozenge-background: #aed0db;
-				--lozenge-border: #3f6674;
-				--lozenge-text: #0c1a1b;
-			}
-			.lozenge[data-category="Supernatural"] {
-				--lozenge-background: #f1ff5f;
-				--lozenge-border: #674800;
-				--lozenge-text: #352005;
-			}
-			.lozenge[data-category="Historical"] {
-				--lozenge-background: #740909;
-				--lozenge-border: #470202;
-			}
-			.lozenge[data-category="Mathematical"] {
-				--lozenge-background: #f53b0e;
-				--lozenge-border: #7e3d2e;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Temporal"] {
-				--lozenge-background: #fffc33;
-				--lozenge-border: #7f7e00;
-				--lozenge-text: #0f0f00;
-			}
-			.lozenge[data-category="Anthropological"] {
-				--lozenge-background: #8affe7;
-				--lozenge-border: #068900;
-				--lozenge-text: #000000;
-			}
-			.lozenge[data-category="Technological"] {
-				--lozenge-background: #c70f7a;
-				--lozenge-border: #8f125b;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Meteorological"] {
-				--lozenge-background: #fff;
-				--lozenge-border: #333;
-				--lozenge-text: #000;
-			}
-			.lozenge[data-category="Literary"] {
-				--lozenge-background: #a22400;
-				--lozenge-border: #5e1500;
-				--lozenge-text: #fff;
-			}
-			.lozenge[data-category="Dramaturgical"] {
-				--lozenge-background: #5f0086;
-				--lozenge-border: #59007d;
-				--lozenge-text: #fff;
-			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;
@@ -146,6 +78,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 		`;
 		shadow.appendChild(mainStyle);
 
+		const categoryColourStyle = document.createElement('style');
+		categoryColourStyle.textContent = categoryColoursCSS;
+		shadow.appendChild(categoryColourStyle);
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
@@ -193,11 +128,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				const queryParams = new URLSearchParams({
 					q: query,
 				});
-				if (component.getAttribute("data-types")) {
-					queryParams.set("filter_by",`type:=[${component.getAttribute("data-types")}]`);
-				} else if (component.getAttribute("data-exclude_types")) {
-					queryParams.set("filter_by",`type:!=[${component.getAttribute("data-exclude_types")}]`);
-				}
+				const filterBy = buildFilterBy(
+					component.getAttribute("data-types"),
+					component.getAttribute("data-exclude_types"),
+					component.getAttribute("data-is-contact"),
+				);
+				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
 					let results = await component.searchRequest(queryParams, abortController.signal);
 					if (abortController.signal.aborted) return;
@@ -270,11 +206,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 				}
 				// Preload all matching options (after groups are registered so options slot correctly)
 				if (component.hasAttribute("data-preload")) {
-					const filterValue = component.getAttribute("data-types")
-						? `type:=[${component.getAttribute("data-types")}]`
-						: component.getAttribute("data-exclude_types")
-							? `type:!=[${component.getAttribute("data-exclude_types")}]`
-							: null;
+					const filterValue = buildFilterBy(
+						component.getAttribute("data-types"),
+						component.getAttribute("data-exclude_types"),
+						component.getAttribute("data-is-contact"),
+					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
 					if (filterValue) preloadParams.set("filter_by", filterValue);