@nanoporetech-digital/components 8.0.0 → 8.1.0

package/hydrate/index.js

@@ -6624,6 +6624,10 @@ filters.define('remove_spaces', (str) => str.replace(/ /g, '_'));
 filters.define('add_spaces', (str) => (str = str.replace(/[_\-]/g, ' ')));
 filters.define('capitalise', (str) => (str = str.charAt(0).toUpperCase() + str.slice(1)));
 filters.define('lowercase', (str) => (str = str.toLowerCase()));
+filters.define('tag_tidy', (str) => {
+    const arr = str.split('>');
+    return arr.map((s) => s.trim())[arr.length - 1];
+});
 const Squirrel = squirrel;
 
 var createDeferredPromise = function () {
@@ -8045,30 +8049,28 @@ class AlgoliaResults {
         this.nanoTplUpdated.emit(this.el);
     }
     connectedCallback() {
-        readTask(() => {
-            this.startTplSlot = this.el.querySelector('[slot="start-template"]');
-            this.startOutputSlot = this.el.querySelector('[slot="start-output"]');
-            if (this.startTplSlot) {
-                this.startTpl = this.startTplSlot.innerHTML;
-                this.startTpl = this.startTpl.replace(/=>/gm, '=>');
-            }
-            this.resultTplSlot = this.el.querySelector('[slot="result-template"]');
-            this.outputSlot = this.el.querySelector('[slot="result-output"]');
-            if (this.resultTplSlot) {
-                this.resultTpl = this.resultTplSlot.innerHTML;
-                this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');
-            }
-            this.endTplSlot = this.el.querySelector('[slot="end-template"]');
-            this.endOutputSlot = this.el.querySelector('[slot="end-output"]');
-            if (this.endTplSlot) {
-                this.endTpl = this.endTplSlot.innerHTML;
-                this.endTpl = this.endTpl.replace(/=>/gm, '=>');
-            }
-            if (this.indexResults) {
-                this.addContentIndex();
-                this.updateResultContent();
-            }
-        });
+        this.startTplSlot = this.el.querySelector('[slot="start-template"]');
+        this.startOutputSlot = this.el.querySelector('[slot="start-output"]');
+        if (this.startTplSlot) {
+            this.startTpl = this.startTplSlot.innerHTML;
+            this.startTpl = this.startTpl.replace(/=>/gm, '=>');
+        }
+        this.resultTplSlot = this.el.querySelector('[slot="result-template"]');
+        this.outputSlot = this.el.querySelector('[slot="result-output"]');
+        if (this.resultTplSlot) {
+            this.resultTpl = this.resultTplSlot.innerHTML;
+            this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');
+        }
+        this.endTplSlot = this.el.querySelector('[slot="end-template"]');
+        this.endOutputSlot = this.el.querySelector('[slot="end-output"]');
+        if (this.endTplSlot) {
+            this.endTpl = this.endTplSlot.innerHTML;
+            this.endTpl = this.endTpl.replace(/=>/gm, '=>');
+        }
+        if (this.indexResults) {
+            this.addContentIndex();
+            this.updateResultContent();
+        }
     }
     componentDidLoad() {
         this.updateStartEndContent();
@@ -8080,10 +8082,10 @@ class AlgoliaResults {
         }
     }
     render() {
-        return (h(Host, { key: '14939adaa742d13214faf5375692737010467a7c', class: {
+        return (h(Host, { key: '857784ead2b9536559ef2220bff26d508061781c', class: {
                 'show-results': this.showResults,
                 'nano-results': true,
-            } }, h("div", { key: '8153995d81af56df593694ca7902e93f6efb0565', class: "default" }, h("slot", { key: '60e2c4a10cdf5f6fbd609972114be5d04ccfe3f0' })), h("div", { key: 'cf589b852a52ffc84b8d9dd48c193603e733f02e', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'aad8bfb81edca4af57503bc80b4eac5cbe69a97e', name: "start-output" }), h("slot", { key: '30e848bcf8b1d0f03d57b65cb805abcca87aefd5', name: "result-output" }), h("div", { key: '8663b935facbe62a5b30d4e6446cc978083369d7', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: 'b8652a198cd7fefe5a127b8bc9387305971be922', name: "end-output" }))));
+            } }, h("div", { key: 'be165b02c4ec5d2358e15dadfd4695fd5901f0b0', class: "default" }, h("slot", { key: '1ab64bb71c75531e8f6b0c65833de7d2dc1ee0ca' })), h("div", { key: 'cee981cead8b921e29fd4223e4985c3615e0e063', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'cff96070ca2acf18f7b8165444b28f433ca3601d', name: "start-output" }), h("slot", { key: '76833dd55d415baf083527ed5580049f90c36b40', name: "result-output" }), h("div", { key: 'dac7a9081d1a65b4e17dec60044467e17575568e', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: '07c82d60a58c11bcc50807ab95d63cf3fd59d768', name: "end-output" }))));
     }
     static get watchers() { return {
         "results": ["addContentIndex", "resultsChange"],
@@ -12817,7 +12819,7 @@ class Popover {
         // this.isVisible = false;
         this.popover.hidden = true;
         this.popover.classList.remove(this.options.visibleClass);
-        this.popover.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
+        this.popover.addEventListener('transitionend', this.handleTransitionEnd);
     }
     handleTransitionEnd(event) {
         const target = event.target;
@@ -12832,10 +12834,13 @@ class Popover {
                 this.popover.classList.remove(this.options.visibleClass);
                 this.options.onAfterHide.call(this);
             }
+            else {
+                this.options.onAfterShow.call(this);
+            }
         }
     }
     destroy() {
-        this.popover.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));
+        this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
         if (this.popper) {
             this.popper.destroy();
             this.popper = null;
@@ -12887,7 +12892,6 @@ class Popover {
                 },
             ],
         });
-        this.popover.addEventListener('transitionend', () => this.options.onAfterShow.call(this), { once: true });
         // Reposition the menu after it appears in case a modifier kicked in
         requestAnimationFrame(() => {
             this.popper?.update().catch((e) => {
@@ -13249,8 +13253,12 @@ class Dropdown {
             distance: this.distance,
             skidding: this.skidding,
             transitionElement: this.panel,
-            onAfterHide: () => this.nanoAfterHide.emit(),
-            onAfterShow: () => this.nanoAfterShow.emit(),
+            onAfterHide: () => {
+                this.nanoAfterHide.emit();
+            },
+            onAfterShow: () => {
+                this.nanoAfterShow.emit();
+            },
             onTransitionEnd: () => {
                 if (!this.open) {
                     this.afterHide();
@@ -13291,12 +13299,12 @@ class Dropdown {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '65a552c8b9235472ab57ac3c301f3e1b151c40bd', class: "nano-dropdown" }, h("div", { key: '0fee8bd6137f883c1b12ccf95d0aaec4203341bb', part: "base", id: this.dropdownId, class: {
+        return (h(Host, { key: 'c0ed4b8b03d27f7437c148c8df305886c6cf29d9', class: "nano-dropdown" }, h("div", { key: '27165586e2caa99ba746e7db3aa1574f0e9d1576', part: "base", id: this.dropdownId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, h("span", { key: '0fcfda39e8a7c4f8cabbab8110f8b57124e28a7c', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '62e560215a97580dfc3bdc192ab5ec486c2df8b1', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '441e9f915d51db0284ca6af4fd612a26d2900ea8', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'd97a50c5657c7869fd3eacc947002d0437795f72', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '298b63fffe6355973013a9724a6c35b1d5e0a74a', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+            } }, h("span", { key: 'b401a4d341e786ae4fe8c54adf06f8da1be4f531', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e0cb2a8823490b70f6aa01073d3873fa785fd763', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: '3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '19cc4dd331a4c2cbdc73a05687681cb2830fff0c', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                 ? undefined
-                : 'polite' }, this.dialogTitle)), h("slot", { key: '98dc1760621b62556092636fda1ac74065dc999a' }))))));
+                : 'polite' }, this.dialogTitle)), h("slot", { key: '5da1881086c31481463b3b7244552e17ee66d997' }))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -15259,7 +15267,7 @@ class GlobalNav {
     }; }
 }
 
-const globalSearchResultsCss = ":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{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:\"\";inline-size:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button .nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar .nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar .nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters .nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);inline-size:70%;block-size:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:rgb(247, 246, 246);transform:translateX(100%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;block-size:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters .nano-details{--padding:0.8em;margin:0.8em 0}.filters .nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters .nano-details .nano-icon[slot=icon-end]{padding-inline:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;block-size:1em;inline-size:1em;min-inline-size:1em;min-block-size:1em;display:inline-block}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>\");content:\"\";block-size:0.7em;inline-size:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-flow:row wrap;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{margin:1em 0 0.5em;inline-size:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title .nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{color:#455556;font-size:13px;inline-size:70%;text-decoration:none}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;inline-size:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:#90c6e7;display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;inline-size:70%}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo .nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image .nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image .nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}";
+const globalSearchResultsCss = ":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{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between;max-inline-size:1266px;margin:auto}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--nano-spacing-xl)}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;cursor:pointer}.main-search button:not(.result__tags-tag):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.main-search a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search div[slot=start-output]{border-block-end:1px solid var(--nano-color-neutral-300);margin-block-end:var(--nano-spacing-md)}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__applied-filters{display:flex;flex-wrap:wrap;gap:var(--nano-spacing-sm);margin-block-end:var(--nano-spacing-md)}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar .nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar .nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters .nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:var(--nano-spacing-md) var(--nano-spacing-l1-default);color:var(--nano-color-neutral-1400);inline-size:70%;block-size:100%}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 var(--nano-spacing-l1-default);padding-block:var(--nano-spacing-l) var(--nano-spacing-md);flex:1 1 30%;box-sizing:border-box}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-xs)}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translateX(120%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:var(--nano-spacing-md);overflow:auto;block-size:100vh;background-color:var(--nano-color-surface-200);box-shadow:var(--nano-shadow-l2)}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none;gap:var(--nano-spacing-sm);display:flex;flex-direction:column}.filters li{margin:0;padding:0}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:grid;place-items:center center;grid-template-columns:1.125em 1fr;gap:var(--nano-spacing-sm);cursor:pointer}.filters .filter-label>*{justify-self:start;font-size:var(--nano-font-size-2xs)}.filters .filter-label::before{content:\"\";grid-column:1;grid-row:1;border-radius:1px;block-size:1.125em;inline-size:1.125em;border:1px solid var(--nano-color-primary-1000);font-size:1rem}.filters .filter-label::after{content:\"\";grid-column:1;grid-row:1;border:solid var(--nano-color-basic-white);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em;font-size:1rem}.filters .filter-cb{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.filters .filter-cb:checked~.filter-label::before{background-color:var(--nano-color-primary-1000)}.filters .filter-cb:checked~.filter-label::after{scale:1}.filters .filter-cb:focus-visible:focus~.filter-label::before{outline:var(--nano-focus-ring);outline-offset:1px}.filters-header{display:flex;align-items:center;border-block-end:1px solid var(--nano-color-neutral-300);padding-block-end:var(--nano-spacing-md);margin-block-end:var(--nano-spacing-md)}.filters-reset{color:var(--nano-color-primary-1000);font-size:var(--nano-font-size-xs);text-decoration:underline;margin-inline:auto 0;margin-block:0;appearance:none;background:none;border:none}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:var(--nano-font-size-xs)}:host(.small) .filters-title{display:none}.filters-list{display:flex;flex-direction:column;gap:var(--nano-spacing-md)}.result{text-decoration:none;display:flex;flex-flow:row wrap;gap:var(--nano-spacing-sm);color:var(--nano-color-neutral-1400)}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{inline-size:70%;display:flex}.result__title a{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);text-decoration:none;color:var(--nano-color-neutral-1400)}.result__title .nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{font-size:var(--nano-font-size-xs);inline-size:70%;text-decoration:none;color:var(--nano-color-neutral-1400)}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:var(--nano-color-neutral-300)}.result__meta{display:flex;flex-flow:row wrap;font-size:var(--nano-font-size-2xs);line-height:13px;inline-size:100%;align-items:center}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:var(--nano-color-neutral-300);display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap;gap:var(--nano-spacing-sm)}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__type{text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center}.result__source{padding-inline-end:0.75rem}.result__authors{font-size:var(--nano-font-size-2xs);margin-block-end:var(--nano-spacing-xs);text-decoration:none;inline-size:70%;color:var(--nano-color-neutral-1400)}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:var(--nano-color-neutral-1400)}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:var(--nano-color-primary-1000);text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:var(--nano-color-neutral-1400);display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid var(--nano-color-neutral-300)}.result__promo-date{font-size:var(--nano-font-size-2xs)}.result__promo-venue{font-size:var(--nano-font-size-2xs)}.result__promo .nano-icon{color:var(--nano-color-primary-1000);position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:var(--nano-spacing-xs)}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image .nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:var(--nano-pictogram-size-small);color:var(--nano-color-primary-1000);--primary-color:var(--nano-color-base-0);--secondary-color:var(--nano-color-primary-1000);--primary-opacity:1}@media (max-width: 576px){.result__image .nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:var(--nano-spacing-md);display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:var(--nano-spacing-xl) 0;text-align:center;border-block-start:1px solid var(--nano-color-neutral-300)}.search-empty h2{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:var(--nano-color-highlight);font-style:normal}";
 
 const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
 let searchResultIds = 0;
@@ -15329,6 +15337,9 @@ class GlobalSearchResults {
         };
         this.algoliaEle.query = meta.query;
     };
+    handleNanoFilterChanged() {
+        this.el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
     handleReorder(e) {
         if (e
             .composedPath()
@@ -15366,7 +15377,7 @@ class GlobalSearchResults {
         this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');
         const oldResults = this.algoliaEle.querySelector('.old-posts');
         if (oldResults) {
-            oldResults.addEventListener('change', (e) => {
+            oldResults.addEventListener('nanoChange', (e) => {
                 this.toggleOldResults(e.target.checked);
             });
         }
@@ -15383,8 +15394,8 @@ class GlobalSearchResults {
         this.algoliaResultsEle.addEventListener('click', this.resultClick);
         // wire up remove filter event listener
         resultEle.querySelectorAll('.remove-filter').forEach((item) => {
-            item.removeEventListener('click', this.removeFilterClick);
-            item.addEventListener('click', this.removeFilterClick);
+            item.removeEventListener('nanoClose', this.removeFilterClick);
+            item.addEventListener('nanoClose', this.removeFilterClick);
         });
         // wire up the back button event listener
         resultEle.querySelectorAll('.back-btn').forEach((item) => {
@@ -15428,7 +15439,8 @@ class GlobalSearchResults {
         setTimeout(() => this.filtersDiv.focus(), 20);
     };
     removeFilterClick = (e) => {
-        this.removeFilter(e.target.dataset.filter, e.target.dataset.filterVal);
+        const target = e.target.closest('[data-filter-val]');
+        this.removeFilter(target?.dataset.filter, target?.dataset.filterVal);
     };
     tagClick = (e) => {
         e.preventDefault();
@@ -15464,7 +15476,7 @@ class GlobalSearchResults {
         this.filtersDiv.classList.remove('show');
         this.filtersDiv.setAttribute('aria-expanded', 'false');
         document.body.style.overflow = '';
-        setTimeout(() => this.openFilterBtn.focus(), 20);
+        setTimeout(() => this.openFilterBtn?.focus(), 20);
     }
     toggleOldResults(show) {
         if (show)
@@ -15472,6 +15484,8 @@ class GlobalSearchResults {
         else
             this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
     }
+    componentWillLoad() {
+    }
     connectedCallback() {
         const globalNavTag = transformTag('nano-global-nav');
         this.globalNav = this.el.closest(globalNavTag);
@@ -15509,17 +15523,17 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: 'adc6446ad3c226627dcae79331259d44849e8266', class: {
-                small: this.currentWidth < 677,
+        return (h(Host, { key: '6f4387b28776c047e2bea038b7de5ebc43c16a49', class: {
+                small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '28968dd88fdd41225883b953de31cb113a5dc77e', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '3a12eec09e7ddc91a40b4043bbc6b14879433e11', slot: "template" }, 
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'cf5fdf51f46cedf20c3242ddfd873903168bb04d', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
+            // @ts-expect-error this bubbles from nano-algolia-filter
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '8abd5c449cb8f570ca9b3a8cdd9247e26dd4a116', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
                   <div class="sc-nano-global-search-results main-search__topbar topbar">
-                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">
-                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>
-                    </button>
+                    <nano-icon-button icon-name="light/chevron-left" class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button"></nano-icon-button>
                     <div>
                       <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results
                     </div>
@@ -15551,16 +15565,15 @@ class GlobalSearchResults {
                       {{ @if (it.appliedFilters) }}
                         {{ @each(it.appliedFilters) => filterObj }}
                           {{ @each(filterObj.values) => filterVal }}
-                            <span class="sc-nano-global-search-results main-search__applied-filter">
-                              {{ filterVal | public_name }}
-                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">
-                                <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
-                              </button>
-                            </span>
+                            <nano-tag 
+                              closable 
+                              size="large" 
+                              data-filter-val="{{ filterVal }}" 
+                              data-filter="{{ filterObj.name }}" 
+                              class="remove-filter"
+                            >{{ filterVal | tag_tidy | public_name }}</nano-tag>
                           {{ /each }}
                         {{ /each }}
-                      {{ #else }}
-                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>
                       {{ /if }}
                     </div>
                   {{ /if }}
@@ -15582,7 +15595,7 @@ class GlobalSearchResults {
                       {{ contentType = result.content_type ? result.content_type : result.type }}
                       <li class="sc-nano-global-search-results">
                         <div class="sc-nano-global-search-results result" data-hit-id="{{ result.objectID }}" data-hit-count="{{ resultIndex }}">
-                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">
+                          <strong class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">
                             <a href="{{ result.url | abs_url(it, result) }}">
                             {{ @if (result._snippetResult) }}
                               {{ result._snippetResult.title.value | safe }}
@@ -15593,7 +15606,7 @@ class GlobalSearchResults {
                               <span class="sc-nano-global-search-results result__pdf">PDF</span>
                             {{ /if }}
                             </a>
-                          </h4>
+                          </strong>
                           {{ @if (result.authors) }}
                             {{ @if (typeof result.authors === 'string') }}
                               <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Authors: {{ result.authors | trim_to(50) }}</a>
@@ -15611,12 +15624,13 @@ class GlobalSearchResults {
                             {{ @if (result.name) }}
                               <a class="sc-nano-global-search-results result__authors" href="{{ result.url | abs_url(it, result) }}">Speaker: {{ result.name | trim_to(50) }}</a>
                             {{ /if }}
+                            
+                            {{ @if (result.image) }}
+                              <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">
+                                <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>
+                              </div>
+                            {{ /if }}
                             <a class="sc-nano-global-search-results result__video-body" href="{{ result.url | abs_url(it, result) }}">
-                              {{ @if (result.image) }}
-                                <div class="sc-nano-global-search-results result__image" style="background-image: url('{{ result.image | abs_url(it, result) }}')">
-                                  <nano-icon class="sc-nano-global-search-results" name="duotone/play-circle"></nano-icon>
-                                </div>
-                              {{ /if }}
                               <div class="sc-nano-global-search-results result__body">
                                 <div class="sc-nano-global-search-results result__description">
                                   {{ @if (result.description) }}
@@ -15624,36 +15638,37 @@ class GlobalSearchResults {
                                   {{ /if }}
                                 </div>
                               </div>
-                              <div class="sc-nano-global-search-results result__meta">
-                                {{ @if (result.type || result.content_type) }}
-                                  <div class="sc-nano-global-search-results result__type">
-                                  {{ @if (contentType === 'lc_lightning_talk') }}
-                                    Presentation
-                                  {{ #else }}
-                                    {{ contentType }}
-                                  {{ /if }}
-                                  </div>
+                            </a>
+                            <div class="sc-nano-global-search-results result__meta">
+                              {{ @if (result.type || result.content_type) }}
+                                <div class="sc-nano-global-search-results result__type">
+                                {{ @if (contentType === 'lc_lightning_talk') }}
+                                  Presentation
+                                {{ #else }}
+                                  {{ contentType }}
                                 {{ /if }}
-                                {{ @if (result.tags) }}
-                                  <div class="sc-nano-global-search-results result__tags">
-                                    {{ @if (typeof result.tags === 'string') }}
-                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
-                                    {{ #else }}
-                                      {{ @each(result.tags) => tag, index }}
-                                        {{ @if(index < 5)}}
-                                          {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}
-                                            <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
-                                          {{ /if }}
-                                        {{ /if }}
-                                      {{ /each }}
+                                </div>
+                              {{ /if }}
+                              
+                              {{ @if (result.source) }}
+                                <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
+                              {{ /if }}
+                            </div>
+                            {{ @if (result.tags) }}
+                              <div class="sc-nano-global-search-results result__tags">
+                                {{ @if (typeof result.tags === 'string') }}
+                                  <nano-tag><button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button></nano-tag>
+                                {{ #else }}
+                                  {{ @each(result.tags) => tag, index }}
+                                    {{ @if(index < 5)}}
+                                      {{ @if (tag !== "No video" && tag !== "Resources" && tag !== "Video") }}
+                                        <nano-tag><button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag | tag_tidy }}</button></nano-tag>
+                                      {{ /if }}
                                     {{ /if }}
-                                  </div>
-                                {{ /if }}
-                                {{ @if (result.source) }}
-                                  <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
+                                  {{ /each }}
                                 {{ /if }}
                               </div>
-                            </a>
+                            {{ /if }}
                           {{ /if }}
                           {{ @if (result.body) }}
                             <a class="sc-nano-global-search-results result__body" href="{{ result.url | abs_url(it, result) }}">
@@ -15663,8 +15678,8 @@ class GlobalSearchResults {
                             </a>
                           {{ /if }}
                           {{ @if (contentType === 'product' }}
-                            <div class="sc-nano-global-search-results result__buttons">
-                              <a class="sc-nano-global-search-results result__buttons-button" href="{{ result.url | abs_url(it, result) }}">View product</a>
+                            <nano-cta size="small">
+                              <a href="{{ result.url | abs_url(it, result) }}">View product</a>
                             </div>
                           {{ /if }}
                           {{ @if (contentType === 'event') }}
@@ -15737,27 +15752,27 @@ class GlobalSearchResults {
                                   {{ /if }}
                                 {{ /if }}
                               {{ /if }}
-                              {{ @if (result.tags) }}
-                                <div class="sc-nano-global-search-results result__tags">
-                                  {{ @if (typeof result.tags === 'string') }}
-                                    {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}
-                                      <button data-value="{{ result.tags | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ result.tags }}</button>
-                                    {{ /if }}
-                                  {{ #else }}
-                                    {{ @each(result.tags) => tag, index }}
-                                      {{ @if(index < 5)}}
-                                        {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}
-                                          <button data-value="{{ tag | lowercase }}" class="sc-nano-global-search-results result__tags-tag">{{ tag }}</button>
-                                        {{ /if }}
-                                      {{ /if }}
-                                    {{ /each }}
-                                  {{ /if }}
-                                </div>
-                              {{ /if }}
                               {{ @if (result.source) }}
                                 <div class="sc-nano-global-search-results result__source">Source: {{ result.source }}</div>
                               {{ /if }}
                             </div>
+                            {{ @if (result.tags) }}
+                              <div class="sc-nano-global-search-results result__tags">
+                                {{ @if (typeof result.tags === 'string') }}
+                                  {{ @if (result.tags !== "Resources" && result.tags !== "Tools" && result.tags !== "Publications" && result.tags !== "Case studies") }}
+                                    <nano-tag><button data-value="{{ result.tags | lowercase }}" class="result__tags-tag">{{ result.tags }}</button></nano-tag>
+                                  {{ /if }}
+                                {{ #else }}
+                                  {{ @each(result.tags) => tag, index }}
+                                    {{ @if(index < 5)}}
+                                      {{ @if (tag !== "Resources" && tag !== "Tools" && tag !== "Publications" && tag !== "Case studies") }}
+                                        <nano-tag><button data-value="{{ tag | lowercase }}" class="result__tags-tag">{{ tag | tag_tidy }}</button></nano-tag>
+                                      {{ /if }}
+                                    {{ /if }}
+                                  {{ /each }}
+                                {{ /if }}
+                              </div>
+                            {{ /if }}
                           {{ /if }}
                         </div>
                       </li>
@@ -15776,30 +15791,26 @@ class GlobalSearchResults {
                       <div class="sc-nano-global-search-results filters-header">
                         <strong class="sc-nano-global-search-results filters-title">Filters</strong>
                         <button class="sc-nano-global-search-results filters-reset">Reset</button>
-                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">
-                          <nano-icon class="sc-nano-global-search-results" name="light/xmark"></nano-icon>
-                        </button>
+                        <nano-icon-button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" icon-name="light/xmark" aria-controls="main-search-filters"></nano-icon-button>
                       </div>
                     {{ /if }}
 
-                    <div>
-                      <input class="sc-nano-global-search-results filter-cb old-posts filters__old-posts" type="checkbox" name="old-posts" id="old-posts" value="nice" />
-                      <label class="sc-nano-global-search-results filter-label" for="old-posts">
-                        <span>Include posts older than 2 years</span>
-                      </label>
+                    <div class="sc-nano-global-search-results filters-list">
+                      <nano-checkbox value="old-posts" class="old-posts" name="old-posts" checked>
+                        <span>Include posts older than 2 years</strong>)</span>
+                      </nano-checkbox>
                       {{ @if(it.origFilters['type']) }}
-                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">
-                          <strong slot="label">Type</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                        <nano-details class="sc-nano-global-search-results" open={true} label="Type" size="small">
                           <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">
                             <script type="text/template" slot="filter-template">
                               <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
                               {{ @foreach(it.dyn) => filter, filterVal }}
                                 <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />
-                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
+                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />
+                                  <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">
+                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                  </label>
+                                </li>
                               {{ /foreach }}
                               </ul>
                             </script>
@@ -15809,18 +15820,17 @@ class GlobalSearchResults {
                       {{ /if }}
 
                       {{ @if(it.origFilters['channel']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Channels</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                        <nano-details open={true} label="Channels"  size="small">
                           <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">
                             <script type="text/template" slot="filter-template">
                               <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
                               {{ @foreach(it.dyn) => filter, filterVal }}
                                 <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
+                                  <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />
+                                  <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">
+                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                  </label>
+                                </li>
                               {{ /foreach }}
                               </ul>
                             </script>
@@ -15830,18 +15840,17 @@ class GlobalSearchResults {
                       {{ /if }}
 
                       {{ @if(it.origFilters['authors']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Authors</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                        <nano-details open={true} label="Authors" size="small">
                           <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">
                             <script type="text/template" slot="filter-template">
                               <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
                               {{ @foreach(it.dyn) => filter, filterVal }}
                                 <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
+                                  <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />
+                                  <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">
+                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                  </label>
+                                </li>
                               {{ /foreach }}
                               </ul>
                             </script>
@@ -15851,19 +15860,18 @@ class GlobalSearchResults {
                       {{ /if }}
 
                       {{ @if(it.origFilters['categories_without_path']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Category</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                        <nano-details open={true} label="Categories" size="small">
                           <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">
                             <script type="text/template" slot="filter-template">
                               <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
                               {{ @foreach(it.dyn) => filter, filterVal }}
                                 {{ @if(!filter.match(/publication/)) }}
                                   <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />
-                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">
-                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                  </label></li>
+                                    <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />
+                                    <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">
+                                      <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                    </label>
+                                  </li>
                                 {{ /if }}
                               {{ /foreach }}
                               </ul>
@@ -15874,18 +15882,19 @@ class GlobalSearchResults {
                       {{ /if }}
 
                       {{ @if(it.origFilters['tags']) }}
-                        <nano-details open={true} icon-rotation="180">
-                          <strong slot="label">Tags</strong>
-                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>
+                        <nano-details open={true} label="Tags" size="small">
                           <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">
                             <script type="text/template" slot="filter-template">
                               <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">
                               {{ @foreach(it.dyn) => filter, filterVal }}
-                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
-                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />
-                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">
-                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
-                                </label></li>
+                                {{ @if(!filter.match('>')) }}
+                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">
+                                    <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter | lowercase }}" id="tags-{{ filter }}-{{x}}" />
+                                    <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">
+                                      <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>
+                                    </label>
+                                  </li>
+                                {{ /if }}
                               {{ /foreach }}
                               </ul>
                             </script>
@@ -15897,7 +15906,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: '120fb25d6070d45591e81c9c67bef304136d21fc', slot: "output" }), h("slot", { key: '824a05f852bf5259f1809293a76cde06472a09a1' }))));
+            </div>`), h("div", { key: '33b7b45a25b64b26e7ccd724e0171c997c145540', slot: "output" }), h("slot", { key: '15039307d1b06217c2666eb344a44fe9966a336f' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],