@nanoporetech-digital/components 8.3.2 → 8.4.1

package/dist/esm/{nano-data-table-Bqk8ZUaL.js → nano-data-table-CWliPF7Y.js}

@@ -8,6 +8,20 @@ import { d as debounce } from './throttle-C93FMm2Z.js';
 import { i as isInViewport, f as findScrollParent } from './scroll-1nFw8CNk.js';
 import { c as createStore } from './index-BlBZYxu4.js';
 
+function perMark(name, end = false) {
+    if (!performance || false)
+        return;
+    if (end) {
+        performance?.mark('end' + name);
+        performance?.measure(name, 'start' + name, 'end' + name);
+        const entries = performance?.getEntriesByName(name);
+        console.info(entries[entries.length ? entries.length - 1 : 0]);
+    }
+    else {
+        performance?.mark('start' + name);
+    }
+}
+
 const CSSNAMESPACE = 'nano-tbl';
 
 const isInstanceOf = (value, className) => {
@@ -112,7 +126,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = import('./table.worker-a52UkSRM.js').then(m => m.worker);
+const workerPromise = import('./table.worker-DJks4i_l.js').then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -1378,6 +1392,7 @@ const NanoDataTable = class {
         const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('sort');
         this.currentSort = order + ':' + column;
         // doesn't make sense to leave user in place for a sort
         this.scrollToTop(element);
@@ -1427,17 +1442,20 @@ const NanoDataTable = class {
             return { ...c, order: null };
         });
         this.nanoTblAfterSort.emit({ column: column, order });
+        perMark('sort', true);
     }
     async searchStart() {
         this._loading = true;
         const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('search');
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
         try {
             await storeSearch(this.host, this.searchTerm);
             this.nanoTblAfterSearch.emit({ term: this.searchTerm });
+            perMark('search', true);
         }
         catch (e) {
             console.warn('search failed', e);
@@ -1464,6 +1482,7 @@ const NanoDataTable = class {
         const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('filter');
         this.currentFilters = JSON.stringify(this.filters);
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
@@ -1518,6 +1537,7 @@ const NanoDataTable = class {
         });
         await storeFilter(this.host, this.filters);
         this.nanoTblAfterFilter.emit({ filters: this.filters });
+        perMark('filter', true);
     }
     /** Scrolls to the top immediately - used whilst sorting / filtering */
     scrollToTop(element) {
@@ -1553,6 +1573,7 @@ const NanoDataTable = class {
     setInitialBlockDimension() {
         if (!this.blockElements?.length)
             return;
+        perMark('blockDims');
         const testForDimensions = async () => {
             await this.setMeasureElement();
             if (this.unitHeight)
@@ -1578,6 +1599,8 @@ const NanoDataTable = class {
         });
         // we're all finished.
         dimensionsReady.then(() => {
+            perMark('blockDims', true);
+            perMark('init', true);
             requestAnimationFrame(() => (this.isReady = true));
         });
     }
@@ -1612,6 +1635,7 @@ const NanoDataTable = class {
             this.blocks = [];
             return;
         }
+        perMark('setBlocks');
         // this.ignoreIO = true;
         let i = 1;
         const l = this.virtualTotalItems > dRows.length
@@ -1634,6 +1658,7 @@ const NanoDataTable = class {
             blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
         }
         this.blocks = blocks;
+        perMark('setBlocks', true);
     }
     /**
      * Returns a block render height.
@@ -1683,6 +1708,7 @@ const NanoDataTable = class {
      */
     scrollHandler = () => {
         let scrollPos = 0;
+        perMark('scrollHandler');
         // don't listen if this table isn't in the viewport
         if (!this.store?.general.state.isActive || !this.rows)
             return;
@@ -1720,6 +1746,7 @@ const NanoDataTable = class {
                 }
                 blockIndex++;
             }
+            perMark('scrollHandler', true);
         });
     };
     /** Process slotted content */
@@ -1748,6 +1775,7 @@ const NanoDataTable = class {
     }
     // Component lifecycle
     async componentWillLoad() {
+        perMark('init');
         // setup stores
         this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
         this.handleRowsChange();
@@ -1789,9 +1817,11 @@ const NanoDataTable = class {
             return false;
     }
     componentWillRender() {
+        perMark('render');
     }
     componentDidRender() {
         this.setMeasureElement().then(() => this.setBlockHeight());
+        perMark('render', true);
     }
     disconnectedCallback() {
         if (!this.activeWatcherIo)

package/dist/esm/nano-data-table.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-export { N as nano_data_table } from './nano-data-table-Bqk8ZUaL.js';
+export { N as nano_data_table } from './nano-data-table-CWliPF7Y.js';
 import './index-BM3Om9WE.js';
 import './renderer-BaP2L8CT.js';
 import './math-BEqsTfVK.js';

package/dist/esm/nano-details.entry.js

@@ -129,7 +129,9 @@ const NanoDetails = class {
             if (this.stateChanging)
                 return;
             for (const change of changes) {
-                if (change.type === 'attributes' && change.attributeName === 'open') {
+                if (change.type === 'attributes' &&
+                    change.attributeName === 'open' &&
+                    !this.disabled) {
                     this.open = this.detailsEl.open;
                 }
             }
@@ -157,13 +159,13 @@ const NanoDetails = class {
         }
     }
     render() {
-        return (h(Host, { key: '4109b3670c8ccd41ddac5eb03e799e1c149ad7c8', class: "nano-details" }, h("details", { key: '6af0af31042e2bb156e835604b4f79edad79b7ce', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: '1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480', class: "nano-details" }, h("details", { key: '22659218ba7d1ec936523ff33c7ed2a1efb2af74', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 disabled: this.disabled,
-            } }, h("summary", { key: '6589a9dd56e93246177f8c7b6f5e46f279e661c1', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '7d794f0724f7c43bf4747edd1e402be32ec28129', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '4e55292c3018d9bbcb4b65e2f69002bf0cb5ae43', name: "icon-start" }))), h("div", { key: 'd3ab36f253ae4f062fe2aa998c483648b382b7ca', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '6bd0a9630c2d657915811164bdcbf0696609d4e5', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'b38f81f25f6d224da5afa1d701621993dba3d723', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            } }, h("summary", { key: '3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '4a8de08dca34823e162019e2d4dddef2ed2c123d', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: 'cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a', name: "icon-start" }))), h("div", { key: '0b11c544cfbb5852dfeae66b482154f1780a2569', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '5470af7891318c513870c473a8ad1f501174f51b', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '45960716eeec5d5ad08b63fd536608fcd33ab8f2', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
             !this.slotCtrl.has('icon-end') &&
             !this.slotCtrl.has('icon-expand') &&
-            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'be8d56737badde36a3a88f797f411065e5a59ae4', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: '90d0bba50dc77e45c5861ac74188aba8005980fc', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'ecc6e416fb9bc20d0d2feb99c7ed899104338c1e', class: "content-wrapper" }, h("div", { key: '18115d6264604535817c700ab7eea7265f4d7b3b', part: "content", class: "content", id: "content" }, h("slot", { key: 'bfdb6bda88ba909bbedec0e000b6fef5c1d1895c' })))))));
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '5357b61cb197dc4a1ceccf415a34defdfeb6b290', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'aa7f850c8415c2cd40fd7a965fba8eb98fca62b5', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'e98e6a68e4c15525b4377d4229fb4a1855650732', part: "content-wrapper", class: "content-wrapper" }, h("div", { key: '6710e302f7e2a5987ccd6703ea3c6cc0bf705d23', part: "content", class: "content", id: "content" }, h("slot", { key: '891525e66383979e621787f766bcfbcea78a9630' })))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]

package/dist/esm/nano-field-validator.entry.js

@@ -507,7 +507,9 @@ const FieldValidator = class {
             this._valid = this.activeForm.checkValidity();
             this.internalValidate = false;
         }
-        this.nanoPayloadChange.emit(this._store.state);
+        setTimeout(() => {
+            this.nanoPayloadChange.emit(this._store.state);
+        }, 20);
     };
     /**
      * Handles nano field value changes and passes to store
@@ -600,7 +602,7 @@ const FieldValidator = class {
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (h(Host, { key: '145b307561c5a2a35d5b6b6d88d03c88ba8a41b4', class: "nano-field-validator" }, this.userForm && h("slot", { key: '2a16d6a8f32afe2c22522e240e117ccf8446edc5' }), !this.userForm && (h("form", { key: 'c72a5b25d958c97d28c78279b05fa7a3643a994e', ref: (f) => (this.activeForm = f) }, h("slot", { key: '7983e9fc33115b5448b980cbcba0940163521db8' })))));
+        return (h(Host, { key: 'bb60437392e410d528560b9a8a63c58b13f25495', class: "nano-field-validator" }, this.userForm && h("slot", { key: '7e9ff598dce291e80b53638453a8544398382cdd' }), !this.userForm && (h("form", { key: '68241c190268172ff742839ff57a5ac1ff66ca8e', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'e89427bf668eb47217accdb2844d14cb4c3abd36' })))));
     }
     static get watchers() { return {
         "userForm": ["userFormChange"],

package/dist/esm/nano-footer.entry.js

@@ -4,7 +4,7 @@
 import { r as registerInstance, g as getElement, h, k as getAssetPath } from './index-BM3Om9WE.js';
 import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
 
-const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n  :host .top {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(2, auto);\n  }\n  :host .top-end {\n    grid-row: 2;\n    grid-column: 1/-1;\n  }\n}\n@container footer-container (max-width: 912px) {\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr;\n  }\n  :host .top {\n    display: flex;\n    flex-direction: column;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
+const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-centre a {\n  color: inherit;\n}\n:host .middle-centre a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-centre a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-centre,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-centre {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n  :host .top {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(2, auto);\n  }\n  :host .top-end {\n    grid-row: 2;\n    grid-column: 1/-1;\n  }\n}\n@container footer-container (max-width: 912px) {\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr;\n  }\n  :host .top {\n    display: flex;\n    flex-direction: column;\n  }\n  :host .middle-centre {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-centre,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
 
 const NanoFooter = class {
     constructor(hostRef) {
@@ -15,7 +15,7 @@ const NanoFooter = class {
         addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
     render() {
-        return (h("footer", { key: 'ad9124b0506f07fdd015b9b9d83700361ab742cc', class: "footer" }, h("div", { key: 'f09dfec1b8027ffcef0985fb6224c9b628dadc0c', class: "upper" }, h("div", { key: '88add053d5be6c9759a42cab3404c603e41c1382', class: "top" }, h("div", { key: '753a6033b2c4ae7309a606928ca8246d620875e0', class: "top-start" }, h("slot", { key: 'eaf5f113d7c9c8a1ac8d9fd9846c85948ebe7d95', name: "top-start_heading" }), h("slot", { key: '2ca260ad39092343a9c597b8fb5164a086532b8c', name: "top-start_content" })), h("div", { key: '51e8419574d2039bda98bb4affadd485c8d4a3b6', class: "top-center" }, h("slot", { key: '933a75ba455047d1f6ded2f5322d11ebd813c917', name: "top-center_heading" }), h("slot", { key: 'f4442a6a9db8c8a587e25078ba2230a098cf590e', name: "top-center_content" })), h("div", { key: '2ad9a3711ee3c75f1fb67d613529155c7d80a886', class: "top-end" }, h("slot", { key: '6063e0c71f4c09fcd4a4e8719af0e80530e54f78', name: "top-end_heading" }), h("slot", { key: '9865f409f081b9f9f3c369f136b30068abc00f83', name: "top-end_content" })))), h("div", { key: '17792c4b0a7915da9c44b03189b23937c4d78d0f', class: "lower nano-theme-dark" }, h("div", { key: '730c6c11af50c2eb2ccbd8346512523d13cd83a4', class: "middle" }, h("div", { key: 'd1b4aa896e49b8439749877d62edc1d1f9a8ce60', class: "middle-start" }, h("img", { key: '03d069e3c3f0117645b0b582986ef19421459db2', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46", part: "logo" })), h("div", { key: '48913cfa80d310080e5b766cea5dc8a6a2153e95', class: "middle-center" }, h("a", { key: '3aa82ee1f0c5443ff8a7ad81a50a8129383a5e4d', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: 'fac32fab99baaa4476356610ac4649bac4ab30b1', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '75021ad4cd6568683341b249acdb11e479c659b6', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '1d6776dea11fa00bdd6a7fb0bd1a6e6ac76e5c63', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '5ddc844307153f2ba6f58eb48696e9a02ff27e65', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: 'ed29a8200eb47d4727cb0c06c72fe087e14a45ac', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: '63963d0675dd0908a4ed12ed3b3344d752642ec3', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: 'c540f5fcb0301514cff16158ecb3b03b2a0ceb9e', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: 'f36804cb9024d90be38d3e000ab944122034bbe3', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: 'afa1ac76dc98788f56782a6a560cd5be66cb1750', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: '29f746cfb9777fc1ab3b3de41d1a3b5cb2874a28', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: 'feb1b2e25e1989bf3da08c53aa1b788e2d426f22', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), h("div", { key: 'c4431c0068b75e71953a8aa3c0ec0b36a39abf80', class: "middle-end" }, h("slot", { key: '245967e8c48df6297c2ab844c6062308ed03d826', name: "middle-end" }))), h("div", { key: '38db00fa10bbc448ede2b1a04550e5f76601d18d', class: "bottom" }, h("div", { key: '01da652b355b79369fcfe73d7014b3b4ded98394', class: "bottom-start" }, h("slot", { key: '3257e79f443a60728c5e8fc412a4f93c4a20ca9b', name: "bottom-start" }, h("p", { key: '1b333726f33b0dcc252107daed63623c4788d94d' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), h("div", { key: '20d927b82132f7ca382b4d5bb17056b8a8075d41', class: "bottom-end" }, h("slot", { key: 'eab15c3956b4c9eef65736a4cf8eb623143579ca', name: "bottom-end" }))))));
+        return (h("footer", { key: 'c2a8504a9eb51ed5b5ddd3da0adf06ae4c619155', class: "footer" }, h("div", { key: 'd2aa1e0ca9d7a546f0a8ac53e3f2aee31b69c144', class: "upper" }, h("div", { key: 'eff89342b051447e6518a89d4b8c4072ccacd9cc', class: "top" }, h("div", { key: 'a3081f69348ca489e82fab5692caf3e530341394', class: "top-start" }, h("slot", { key: '2b9197d57ca7914d86a640dae4297b3b73c58d04', name: "top-start_heading" }), h("slot", { key: '0d48a29421927c55f73ae9e69c4ab9ac4c2f2c6a', name: "top-start_content" })), h("div", { key: '42845d69fc0b65501f3d391c7d6a8f78815d892b', class: "top-center" }, h("slot", { key: '47046cd14d811f78b3e750bd35df7d2cececbe2c', name: "top-center_heading" }), h("slot", { key: '4ed1e887e7a7fa7d4be901cc26579691b1fd4aa0', name: "top-center_content" })), h("div", { key: 'dcb140d7f5fda4530e90be3a9f9f8fcac914c508', class: "top-end" }, h("slot", { key: '48f6027d5155383f1928408a47dd250250f2a841', name: "top-end_heading" }), h("slot", { key: '83f5a9ad3568dd75bf84ad6532b2094244ed0d96', name: "top-end_content" })))), h("div", { key: '3fc2df5976c5802f17338b601cc8162397385210', class: "lower nano-theme-dark" }, h("div", { key: '97018136a4e7f65ffbbb706919e0f04cd693ee6e', class: "middle" }, h("div", { key: '8d1090ea74fede921c3c657cf6b3d59d4d4099ea', class: "middle-start" }, h("img", { key: 'd227c88e189f725042500884743ab8d5a3bdb47a', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46", part: "logo" })), h("slot", { key: '3c2dfa7cb2e6a00715dfa51febb836f981fbf3f6', name: "middle-centre" }, h("div", { key: '0bcf3ad9ff6d9cff398e5a69f69dc3eec7cef425', class: "middle-centre" }, h("a", { key: '2046a3d31732c36c024b02f40b333c6e3e940ad9', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: '3d2f8b00bcb23cf63cc0433244ab8e787ae58de1', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '449625ca6b7866ac54d410871ef8dd48c0b921a4', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '2bfa9fdae2df01571cf735b6a8621bf4591954ec', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '92d9aa410759d7137bf76878820565e31783306f', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: '294302355c16e5cd10d0958eeb6e5f82d486ec9a', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: 'a2e1f1a50e25e79e1a6f856941494fee1a5d9348', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: '5f755d6191da952039e4dd212790d73e44869689', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: 'ac1b66b957ac42cd31111d1ce1a19c603442f71b', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: '6c31573dd300a2f1f973b17e62ae5013cef0faa7', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: '5c1738d75d98eab928d6e3331991f0f13a0a0a01', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: 'bbfd2562b24bab2dd6b5ac0abda7d328be8b77f2', name: "brands/instagram", size: "large", ariaLabel: "Instagram" })))), h("div", { key: '7fa7ce2a77355ef0e479db3d328c6c549ad0b0e0', class: "middle-end" }, h("slot", { key: '25fb3c61e7c29211f94fa6ad18023273fda6bbee', name: "middle-end" }))), h("div", { key: 'f6be28833e0a022e8918be48869d1655b19de781', class: "bottom" }, h("div", { key: 'bf6d46ecf55c77e1e9c5de89438b73c747e7c228', class: "bottom-start" }, h("slot", { key: '361dbfd8db399e50b300aab1bb4af8049b74f033', name: "bottom-start" }, h("p", { key: '14ef6c21d9da97caf9d0181740fbf0e270beb9d3' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), h("div", { key: 'fd2a849f3bd442ef1b81f93c829aa6fc20741fe1', class: "bottom-end" }, h("slot", { key: 'e6739d536a4075bcb14dbbb6c890f5927d71a869', name: "bottom-end" }))))));
     }
 };
 NanoFooter.style = footerCss;

package/dist/esm/nano-global-nav.entry.js

@@ -71,7 +71,7 @@ const GlobalNav = class {
         });
     }
     /**
-     * MyAccount data automatically set via `myAccountUrl`.
+     * MyAccount data is automatically set via `myAccountUrl`.
      * Alternatively you can directly provide a JSON object which is useful for SSR
      * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
      */
@@ -380,7 +380,7 @@ const GlobalNav = class {
     };
     handleSearchCloseEvent = (e) => {
         if (e.target.classList.contains('gn__search-dropdown')) {
-            this.searchBarShown = false;
+            requestAnimationFrame(() => (this.searchBarShown = false));
         }
     };
     handleSearchTermInputEvent = (e) => {
@@ -482,33 +482,34 @@ const GlobalNav = class {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: 'a11b011a86053bb118d2a2718fde17ba98a818a2', class: {
+        return (h(Host, { key: '3964e8a3aab86d4252876816ca934c69e75da22b', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '883aa872acfdd67b58b11bb6bd36f520e21308a6', class: {
+            } }, h("div", { key: 'fc2f728b3c4412913ffc2d18c07d057bf6e0bf87', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '8eab86995bdb7a64ab20a5922f8fed085c00dd9a', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'bec24a05669c928f332f52531da350fede81e09b', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '79ea2417881502eea913922536255ff07a520dec', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '139e672405b09a05784765c02fdcd2937ef72ee8', name: "overflow" }))), h("div", { key: '52f185901c3d7b53f94fe23598941c836177ca4f', class: "gn__menu-bar-wrapper" }, h("div", { key: '8fa34c4322037f38f2804e385c90155ba0cc6566', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '807c175fb7c54c6e88fe03ef13b105b601110fc9', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '4e524e4266f8b4c980bad91a821da3864d6ef7c5', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'cd5251ce86c170167cecc3927caeb3d96c46c038', name: "logo" }, h("a", { key: 'cba3f5560b1285b99e893adab8df08739d7a55ba', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '64acb1e7f44c8931bd928e0c6be01eaf83cf47ff', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '49dc9cf7e3d75dee49d7a50defde7a260c33f867', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'ffb1b38b1e7682ab2fe26d44a0c9686306634197', name: "logo" }, h("a", { key: 'a8427d3042b4871027a08b5ea993c57659ab12c0', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '49ee4adade1ad0cda74fbb3fbd210f2469057b3e', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5600be22c0fcd69fb51a2e1ee9a5f4b3ea1a8c35', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '24eabdc75c19c564382096ca71b7f1f8ad36a3b0', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '458613e1f5e9fe71ba73bc67b30725e3394251ba', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '844fb0cdc10c8c9e1e0e2c9d8a035c4e1e651b7f', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '34493f43a9ce0a4143f2b506d3ff2c5983c0ebf2', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'b8f9415058b665e618509e080a8d99de1d6875cf', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
-                this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'fdce329dcd11f5fd47b80407cca87e4ba5586b6c', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '9647d74f50b93ffa2f7164d661382a7ba23a1518', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f0b1bb77607ddbe71fe15a7ec0b4a0211e6c56b9', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '0c87148566edcae34bfa237cd4fb8a4a8a482ee8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
-            this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
-                    searchInsight.sendClick({
-                        index: this.activeIndex.index,
-                        eventName: 'Global nav quick search - search result clicked',
-                        queryID: this.autocompleteResults.queryID,
-                        objectIDs: [hit.objectID],
-                        positions: [i + 1],
-                    });
-                } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: 'a7b6d4ff2b9d356342bcb2fbbd03356d982953f3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: '884fe3776886eaf768355c60ba5a8eb7d41caa54', class: "gn__cart" }, h("nano-icon-button", { key: '17d8b0611855c47d200504c7885c270f20736109', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: 'e00aed6a3ba8165f56738ab5494fabc66af68381', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '51d372b7aaa316b4d1ddc945bf0b3c5cdba579af', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7af369c343889985cfda4d596576e6ad0913f34c', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f122c285ba5966efe5fdb5698ab759fa89eb9282', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '8fe139d799eeb34b1ff129808338ce8d6304d262', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '95d27edc95e00c96ce9751e9501429e0062bcab6', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '109461b01a0cbd6ee5c0d0120d93802f8b4a2642', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '81d5c3531557500daebe167defe8b068909ffe9f', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
+                    this.handleSearchTermChangeEvent(e.detail.value);
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '4c3dc50a07877f4c10bbebe2b91d5cc2a6924aee', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'ab9037d4d2c5dc5bca7cdb21ced7a50a5ea181b1', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '794cbd8cc6fd876e931457c93caad690be445400', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'de620a03a8bba906542c10e46d1529f1b6a63327' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+                this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
+                        searchInsight.sendClick({
+                            index: this.activeIndex.index,
+                            eventName: 'Global nav quick search - search result clicked',
+                            queryID: this.autocompleteResults.queryID,
+                            objectIDs: [hit.objectID],
+                            positions: [i + 1],
+                        });
+                    } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
+                h("nano-option", { key: '35962d666c2f47c4952f1a06324db3db186a21e1', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), h("div", { key: '930f8a1adb7566478ec7e9e96b08ecdefecfd4b8', class: "gn__cart" }, h("nano-icon-button", { key: '76f447b14988391240284c66d1e6e347c8873067', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '389552b85553b498ce5b799dc182f73933dadc59', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '3b292618916afe3f08fc456c105df868725ddb26', part: "site-search-results" }, h("div", { key: '8bb4b9fe8389ac2f4aa2784294fd1bd1f736e9c4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'cf2327c16e479d36cc4f2dcd67d2c026518a3ebc' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '38b900fdb5dbcd1d24642c8862c320c473de6dc3', part: "site-search-results" }, h("div", { key: 'b5b824f4a54aa2989ca0a359f7c7b74ae5e6d777', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '02dd2c08252ba31c972fffe9c956e7ead76f61ef' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/esm/nano-grid-item.entry.js

@@ -15,7 +15,7 @@ const GridItem = class {
      * m-row-start-2
      */
     render() {
-        return h("slot", { key: '8df6ce243d4a12c9cfe966f33d70b181eeb84b43' });
+        return h("slot", { key: '9a50a1034bd70b2d0c461f01acdb6b0484e492d3' });
     }
 };
 GridItem.style = ":host { display: inline-block; }";

package/dist/esm/nano-grid_2.entry.js

@@ -1,133 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h, a as Host, g as getElement, r as registerInstance, c as createEvent } from './index-BM3Om9WE.js';
-import { h as h$1 } from './renderer-BaP2L8CT.js';
-
-// import type { VNode, HTMLStencilElement } from "@stencil/core";
-const supportsConstructibleStylesheets = (() => {
-    try {
-        return !!new CSSStyleSheet();
-    }
-    catch (_e) {
-        return false;
-    }
-})();
-const cacheKeys = new WeakMap();
-/**
- * Dynamically create a constructible stylesheet which is applied to the component.
- * The stylesheet is then cached for future instances of the component.
- * @usage
-As a string:
-```
-@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
-As a function:
-```
-@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
- * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
- * @returns `@ConstructableStyle` decorator
- */
-function ConstructibleStyle(opts = {}) {
-    return (target, propertyKey) => {
-        if (!opts.cacheKeyProperty) {
-            opts.cacheKeyProperty = propertyKey;
-        }
-        const { componentWillLoad, render, componentWillRender } = target;
-        if (!componentWillLoad)
-            console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
-        if (supportsConstructibleStylesheets && true) {
-            const addStylesheet = (instance) => {
-                if (!instance[opts.cacheKeyProperty] ||
-                    (cacheKeys.get(instance) &&
-                        cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
-                    return;
-                cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
-                const host = getElement(instance);
-                const cssText = typeof instance[propertyKey] === 'function'
-                    ? instance[propertyKey]()
-                    : instance[propertyKey];
-                const root = (host.shadowRoot || document);
-                root.adoptedStyleSheets = [
-                    ...(root.adoptedStyleSheets || []),
-                    getOrCreateStylesheet(instance, target, cssText, opts),
-                ];
-            };
-            target.componentWillLoad = function () {
-                const willLoadResult = componentWillLoad && componentWillLoad.call(this);
-                addStylesheet(this);
-                return willLoadResult;
-            };
-            target.componentWillRender = function () {
-                const willRenderResult = componentWillRender && componentWillRender.call(this);
-                addStylesheet(this);
-                return willRenderResult;
-            };
-        }
-        else {
-            target.render = function () {
-                const cssText = typeof this[propertyKey] === 'function'
-                    ? this[propertyKey]()
-                    : this[propertyKey];
-                let renderedNode = render.call(this);
-                if (isHost(renderedNode)) {
-                    appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                }
-                else {
-                    renderedNode = h(Host, null, renderedNode);
-                    if (!('attachShadow' in HTMLElement.prototype)) {
-                        appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                    }
-                    else {
-                        if (!target.__constructableStyle) {
-                            const style = document.createElement('style');
-                            style.setAttribute('type', 'text/css');
-                            style.setAttribute('constructible-style', target.constructor.name);
-                            style.innerHTML = cssText;
-                            target.__constructableStyle = style;
-                            document.head.appendChild(style);
-                        }
-                    }
-                }
-                return renderedNode;
-            };
-        }
-    };
-}
-function appendStyleToHost(node, targetName, cssText) {
-    (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
-}
-function getOrCreateStylesheet(instance, target, cssText, opts) {
-    if (!target.__constructableStyle) {
-        target.__constructableStyle = {};
-    }
-    const key = instance[opts.cacheKeyProperty];
-    if (!target.__constructableStyle[key]) {
-        target.__constructableStyle[key] = new CSSStyleSheet();
-        target.__constructableStyle[key].replace(cssText);
-    }
-    return target.__constructableStyle[key];
-}
-function isHost(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (node[prop] === Host) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-function getHostChildren(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (Array.isArray(node[prop])) {
-                return node[prop];
-            }
-        }
-    }
-}
+import { r as registerInstance, a as Host, c as createEvent, g as getElement } from './index-BM3Om9WE.js';
+import { C as ConstructibleStyle } from './constructible-style-B2_GfhhS.js';
+import { h } from './renderer-BaP2L8CT.js';
 
 const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:normal;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;place-items:var(--grid-align-items) var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh;inline-size:100%}";
 
@@ -293,7 +169,7 @@ const Grid = class {
         this.constructSizeArray();
     }
     render() {
-        return (h$1(Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, h$1("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, h$1("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (h$1("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h$1("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '56ae0bda8aedac96841dd8cf308117ef1aaa9824', class: "nano-grid" }, h("div", { key: '6fffc201e4261b8f6c458bd044b31fe12cd9045e', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'a6d7473ba9a8ffd21c4df95c2028e67026ffd1a5' })), this.showHelper && (h("div", { key: '275145f83283b504171fdc973741a1398cca6317', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],
@@ -454,16 +330,16 @@ const Img = class {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h$1(Host, { key: '640969f1b1d3872d0314b455fd602be4e68955cc', class: "nano-img" }, h$1("div", { key: 'fdc45639dabc5872b5a00e7db92865efd5a2ac77', class: "img" }, h$1("div", { key: '5b9cc3e0ef11e3941a6085625b1d9f5e9d6de56a', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h$1("div", { key: 'd8c3a0f6bf742608335189f33ba076d70b08d4a9', class: {
+        return (h(Host, { key: 'f8774fc9ad6e94727378337c2f405a068a7c88fb', class: "nano-img" }, h("div", { key: '15ae3c8ea944c8f0eab8616194f44fc1033e8fe2', class: "img" }, h("div", { key: 'ec3f433ded23dcb7fc57e53b0ecaba789ba492e0', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '8f4e8c9d595a31b477b0ae3f9e135f6b5c3f0e69', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h$1("slot", { key: 'ec35744e264cb18d1ec97a4e9c84f0c7a2d80a3e' }))), h$1("img", { key: 'be687a80241f559f7df7567854e1a59812437624', class: {
+            }, style: bgStyle }, h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h$1("nano-resize-observe", { key: '62398606dab9cc346ffb2acbbb913458684030db', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],

package/dist/esm/nano-hero.entry.js

@@ -94,7 +94,7 @@ const Hero = class {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: 'fd48435b9a236d4b0a13853b495fa6e7a17d759f', class: "nano-hero" }, h("div", { key: '6d4a1d9deb8bdbb1a2c6d55bcedecf03dafbe1d3', class: {
+        return (h(Host, { key: '8270c80717ac41cc4cd5bedb577b131fe01ac967', class: "nano-hero" }, h("div", { key: '8b04bda451af03b648beb5576cd0badd48364aab', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -105,9 +105,9 @@ const Hero = class {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, h("div", { key: 'd6b6675e229a107dd71d12e6b5c3b2decd36c86d', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: 'eeaa0dce87aedba0e30d3a73ae1bc5732a284732', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'fe87fdc964d9b97611014a905620d43ef2d9b01d' }))), !this.imgSrc && [
-            h("div", { key: '74d6e0d9eb61110f8f395258efd2541f795de7f4', class: "hero__bg-slot" }, h("slot", { key: '125bbc331e99605bd2795a4720c0ca53fb4b1862', name: "background" })),
-            h(this.HeroContent, { key: '15ff774728e7dd459bbbaab916b0b2577989aac8' }),
+            } }, h("div", { key: 'be91fa5b23ceddaf411b269eb6635b886c83174d', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '961b0a21220f0305cc0f4a4af0c6cd5e99446c41', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'b272423beee722ae9d4adc0313d2d9ca4e6e3cd4' }))), !this.imgSrc && [
+            h("div", { key: 'f10056208ed97f1d4a051572261c874e5dae6e96', class: "hero__bg-slot" }, h("slot", { key: '225c3a0b114b16e8edb063d6979683b343e85419', name: "background" })),
+            h(this.HeroContent, { key: '375442509ce1954ca651d56d49488b0da464e577' }),
         ]))));
     }
     static get watchers() { return {