@nanoporetech-digital/components 8.23.11 → 8.24.1

package/dist/collection/components/details/details.css

@@ -42,8 +42,8 @@
   * @prop --padding - padding around trigger and content. Defaults to var(--nano-spacing-md)
   * @prop --btn-padding - padding around trigger. Defaults to var(--padding)
   * @prop --btn-bg-color - background color of trigger. Defaults to transparent
-  * @prop --btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-primary-100)
-  * @prop --btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-primary-300)
+  * @prop --btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-fill-secondary-hover)
+  * @prop --btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-fill-secondary-pressed)
   * @prop --content-padding - padding around the content. Defaults to var(--padding
   */
   font-family: inherit;
@@ -61,12 +61,12 @@
   --padding: var(--nano-spacing-md);
   --btn-padding: var(--padding);
   --btn-bg-color: transparent;
-  --btn-bg-color--hover: var(--nano-color-primary-100);
-  --btn-bg-color--active: var(--nano-color-primary-300);
+  --btn-bg-color--hover: var(--nano-color-fill-secondary-hover);
+  --btn-bg-color--active: var(--nano-color-fill-secondary-pressed);
   --content-padding: var(--padding);
   display: block;
-  border: 1px solid var(--nano-color-neutral-300);
-  color: var(--nano-color-neutral-1400);
+  border: 1px solid var(--nano-color-border-default);
+  color: var(--nano-color-text-default);
 }
 
 :host([size=small]) {
@@ -133,7 +133,7 @@
   flex-direction: column;
   justify-content: center;
   display: inline-block;
-  color: var(--nano-color-primary-1200);
+  color: var(--nano-color-icon-primary);
 }
 .header .icon .default-icon {
   rotate: 0deg;

package/dist/collection/components/dialog/dialog.css

@@ -40,12 +40,12 @@
 :host {
   /**
    * @prop --border-radius: border radius of the dialog. Defaults to 0.
-   * @prop --content-background: background color of the dialog content. Defaults to var(--nano-color-neutral-75).
-   * @prop --content-color: text color of the dialog content. Defaults to var(--nano-color-neutral-1000).
-   * @prop --footer-content: background color of the dialog footer. Defaults to var(--nano-color-neutral-75).
-   * @prop --scrim-color: color of the dialog scrim. Defaults to var(--nano-overlay-background-color).
+   * @prop --content-background: background color of the dialog content. Defaults to var(--nano-color-surface-subtle).
+   * @prop --content-color: text color of the dialog content. Defaults to var(--nano-color-fill-neutral).
+   * @prop --footer-content: background color of the dialog footer. Defaults to var(--nano-color-surface-subtle).
+   * @prop --scrim-color: color of the dialog scrim. Defaults to var(--nano-color-overlay-scrim).
    * @prop --box-shadow: box shadow of the dialog. Defaults to var(--nano-shadow-l3).
-   * @prop --close-button-color: color of the close button. Defaults to var(--nano-color-primary-1200).
+   * @prop --close-button-color: color of the close button. Defaults to var(--nano-color-fill-primary-pressed).
    * @prop --width: width of the dialog. Defaults to 60rem.
    * @prop --height: height of the dialog. Defaults to auto.
    * @prop --body-padding-v: vertical padding of the dialog body. Defaults to var(--nano-spacing-l1-default).
@@ -56,12 +56,12 @@
    * @prop --footer-padding-h: horizontal padding of the dialog footer. Defaults to var(--nano-spacing-l1-default)
    */
   --border-radius: 0;
-  --content-background: var(--nano-color-surface-300);
-  --content-color: var(--nano-color-base-1000);
-  --footer-content: var(--nano-color-neutral-75);
-  --scrim-color: var(--nano-overlay-background-color);
+  --content-background: var(--nano-color-surface-default);
+  --content-color: var(--nano-color-text-default);
+  --footer-content: var(--nano-color-surface-subtle);
+  --scrim-color: var(--nano-color-overlay-scrim);
   --box-shadow: var(--nano-shadow-l3);
-  --close-button-color: var(--nano-color-primary-1200);
+  --close-button-color: var(--nano-color-icon-primary);
   --width: 50rem;
   --height: auto;
   --body-padding-v: var(--nano-spacing-l1-default);
@@ -199,7 +199,7 @@
   position: relative;
   inset-block-start: 1px;
   min-inline-size: auto;
-  border-block-start: 1px solid var(--nano-color-neutral-300);
+  border-block-start: 1px solid var(--nano-color-fill-neutral-weak);
   gap: var(--nano-spacing-md);
   display: inline-flex;
 }

package/dist/collection/components/drawer/drawer.css

@@ -42,12 +42,12 @@
    * @prop --size: Size of the drawer. Defaults to 25rem.
    * @prop --min-size: Minimum size of the drawer (only relevant when `resizable` is set). Defaults to 25rem.
    * @prop --max-size: Maximum size of the drawer (only relevant when `resizable` is set). Defaults to 50%.
-   * @prop --panel-background: Background color of the panel. Defaults to var(--nano-color-neutral-75).
+   * @prop --panel-background: Background color of the panel. Defaults to var(--nano-color-surface-subtle).
    * @prop --panel-shadow: Shadow of the panel. Defaults to var(--nano-shadow-l3).
-   * @prop --scrim-color: Color of the scrim. Defaults to var(--nano-overlay-background-color).
-   * @prop --header-button-color: Color of the header button. Defaults to var(--nano-color-neutral-75).
-   * @prop --footer-background: Background color of the footer. Defaults to var(--nano-color-neutral-75).
-   * @prop --header-background: Background color of the header. Defaults to var(--nano-color-neutral-75).
+   * @prop --scrim-color: Color of the scrim. Defaults to var(--nano-color-overlay-scrim).
+   * @prop --header-button-color: Color of the header button. Defaults to var(--nano-color-surface-subtle).
+   * @prop --footer-background: Background color of the footer. Defaults to var(--nano-color-surface-subtle).
+   * @prop --header-background: Background color of the header. Defaults to var(--nano-color-surface-subtle).
    * @prop --header-spacing: Spacing of the header. Defaults to var(--nano-spacing-l).
    * @prop --body-spacing: Spacing of the body. Defaults to var(--nano-spacing-l).
    * @prop --footer-spacing: Spacing of the footer. Defaults to var(--nano-spacing-l).
@@ -55,10 +55,10 @@
   --size: 25rem;
   --min-size: 25rem;
   --max-size: 50%;
-  --panel-background: var(--nano-color-surface-300);
+  --panel-background: var(--nano-color-surface-default);
   --panel-shadow: var(--nano-shadow-l3);
-  --scrim-color: var(--nano-overlay-background-color);
-  --header-button-color: var(--nano-color-primary-1200);
+  --scrim-color: var(--nano-color-overlay-scrim);
+  --header-button-color: var(--nano-color-icon-primary);
   --header-button-size: 1.375rem;
   --footer-background: var(--panel-background);
   --header-background: var(--panel-background);
@@ -119,7 +119,7 @@
 }
 @media (forced-colors: active) {
   .drawer__panel {
-    border: solid 1px var(--nano-color-base-1000);
+    border: solid 1px var(--nano-color-surface-contrast);
   }
 }
 .drawer__panel:focus {
@@ -186,8 +186,8 @@
   justify-content: center;
   position: absolute;
   z-index: var(--nano-z-index-dropdown);
-  color: var(--nano-color-primary-1200);
-  background-color: var(--nano-color-neutral-75);
+  color: var(--nano-color-fill-primary-pressed);
+  background-color: var(--nano-color-surface-subtle);
 }
 .drawer__resize-handle:focus {
   outline: none;
@@ -196,7 +196,7 @@
   background-color: var(--nano-focus-ring-color);
 }
 .drawer__resize-handle:active {
-  color: var(--nano-color-primary-800);
+  color: var(--nano-color-fill-primary);
 }
 .drawer--top .drawer__resize-handle, .drawer--bottom .drawer__resize-handle {
   cursor: row-resize;
@@ -283,7 +283,7 @@
   background: var(--footer-background);
   inset-block-start: 1px;
   position: relative;
-  border-block-start: 1px solid var(--nano-color-neutral-300);
+  border-block-start: 1px solid var(--nano-color-fill-neutral-weak);
   gap: var(--nano-spacing-md);
   display: inline-flex;
 }

package/dist/collection/components/dropdown/dropdown.css

@@ -41,7 +41,7 @@
    * @prop --width: width of the dropdown. Defaults to 'auto'
    * @prop --border: Defaults to 'none';
    * @prop --border-radius: Defaults to '0px';
-   * @prop --background: Defaults to 'var(--nano-color-neutral-75)';
+   * @prop --background: Defaults to 'var(--nano-color-surface-subtle)';
    * @prop --padding: padding of the drop down. Default to 'var(--nano-spacing-sm) 0';
    * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overridden;
    * @prop --dropdown-z-index: Defaults to 'var(--nano-z-index-dropdown)';
@@ -53,7 +53,7 @@
   --width: auto;
   --border: none;
   --border-radius: 0px;
-  --background: var(--nano-color-neutral-75);
+  --background: var(--nano-color-surface-subtle);
   --padding: 0 0;
   --overflow: auto;
   --dropdown-z-index: var(--nano-z-index-dropdown);

package/dist/collection/components/file-upload/file-upload.css

@@ -52,16 +52,16 @@
   */
   min-block-size: 1rem;
   display: block;
-  --color-error: var(--nano-color-danger-1100);
-  --color-error-light: var(--nano-color-danger-100);
-  --color-text: var(--nano-color-neutral-1400);
-  --color-drop-browse: var(--nano-color-primary-1200);
-  --color-drop-border: var(--nano-color-primary-1200);
-  --color-drop-bg: var(--nano-color-primary-75);
+  --color-error: var(--nano-color-fill-danger);
+  --color-error-light: var(--nano-color-fill-danger-weak);
+  --color-text: var(--nano-color-text-default);
+  --color-drop-browse: var(--nano-color-fill-text-link);
+  --color-drop-border: var(--nano-color-border-accent);
+  --color-drop-bg: var(--nano-color-surface-brand-feature);
   --drop-height: 3.5em;
-  --color-btn-bg: var(--nano-color-base-0);
-  --color-btn-border: var(--nano-color-primary-1000);
-  --color-btn-text: var(--nano-color-primary-1000);
+  --color-btn-bg: var(--nano-color-background-default);
+  --color-btn-border: var(--nano-color-border-accent);
+  --color-btn-text: var(--nano-color-fill-primary);
 }
 
 :host([disabled]:not([disabled=false])) {
@@ -76,7 +76,7 @@
 }
 
 .file-upload--dragging {
-  --color-drop-bg: var(--nano-color-success-50);
+  --color-drop-bg: var(--nano-color-surface-success);
 }
 
 .file-upload {
@@ -90,7 +90,7 @@
   letter-spacing: var(--nano-letter-spacing-loose);
 }
 :host([disabled]:not([disabled=false])) .file-upload__label {
-  color: var(--nano-color-neutral-1200);
+  color: var(--nano-color-fill-neutral);
 }
 .file-upload__input {
   clip-path: inset(50%);
@@ -145,7 +145,7 @@
   display: none;
 }
 :host([disabled]:not([disabled=false])) .file-upload__help {
-  color: var(--nano-color-neutral-1200);
+  color: var(--nano-color-fill-neutral);
   opacity: 0.8;
 }
 .file-upload__drop {
@@ -169,9 +169,9 @@
   letter-spacing: var(--nano-letter-spacing-loose);
 }
 :host([disabled]:not([disabled=false])) .file-upload__drop-area {
-  color: var(--nano-color-neutral-1200);
-  background-color: var(--nano-color-neutral-300);
-  border-color: var(--nano-color-neutral-1200);
+  color: var(--nano-color-fill-neutral);
+  background-color: var(--nano-color-fill-neutral-weak);
+  border-color: var(--nano-color-fill-neutral);
 }
 .file-upload__drop-area::after {
   content: "";
@@ -191,7 +191,7 @@
   background-color: var(--color-error);
 }
 .file-upload--dragging .file-upload__drop-area::after {
-  background-color: var(--nano-color-success-1100);
+  background-color: var(--nano-color-fill-success);
   inset: 5px;
 }
 .file-upload__drop-area span {
@@ -202,7 +202,7 @@
   position: relative;
 }
 :host([disabled]:not([disabled=false])) .file-upload__drop-area span {
-  color: var(--nano-color-neutral-1200);
+  color: var(--nano-color-fill-neutral);
   opacity: 0.8;
 }
 .file-upload--focus .file-upload__drop-area span {
@@ -327,7 +327,7 @@
   opacity: 1;
 }
 .file-upload__icon-success {
-  color: var(--nano-color-success-1100);
+  color: var(--nano-color-fill-success);
   opacity: 0;
 }
 .file-upload--valid .file-upload__icon-success {

package/dist/collection/components/footer/footer.css

@@ -80,10 +80,10 @@
   }
 }
 :host .upper {
-  border-block-start: 1px solid var(--nano-color-neutral-200);
+  border-block-start: 1px solid var(--nano-color-border-default);
 }
 :host .lower {
-  background-color: var(--nano-color-basic-black);
+  background-color: var(--nano-color-surface-special);
   color: var(--nano-color-basic-white);
 }
 :host .top,
@@ -108,7 +108,7 @@
   color: inherit;
 }
 :host .middle-centre a:hover {
-  color: var(--nano-color-primary-1000);
+  color: var(--nano-color-text-link-hover);
 }
 :host .middle-centre a:focus-visible {
   outline: var(--nano-focus-ring);

package/dist/collection/components/global-nav/global-nav.css

@@ -39,25 +39,25 @@
   }/** Typography */
 :host {
   /*
-   * @prop --main-menu-bar-bg-color: Background color of the main menu bar. Defaults to var(--nano-color-base-0);
-   * @prop --main-menu-text-color: Text color of the main menu. Defaults to var(--nano-color-base-1000);
-   * @prop --main-menu-hover-text-color: Hover text color of the main menu. Defaults to var(--nano-color-primary-1000);
-   * @prop --main-menu-active-text-color: Active text color of the main menu. Defaults to var(--nano-color-primary-1200);
-   * @prop --main-menu-active-border-color: Active border color of the main menu items. Defaults to var(--nano-color-primary-1000);
+   * @prop --main-menu-bar-bg-color: Background color of the main menu bar. Defaults to var(--nano-color-background-default);
+   * @prop --main-menu-text-color: Text color of the main menu. Defaults to var(--nano-color-surface-contrast);
+   * @prop --main-menu-hover-text-color: Hover text color of the main menu. Defaults to var(--nano-color-fill-primary);
+   * @prop --main-menu-active-text-color: Active text color of the main menu. Defaults to var(--nano-color-fill-primary-pressed);
+   * @prop --main-menu-active-border-color: Active border color of the main menu items. Defaults to var(--nano-color-fill-primary);
    * @prop --overflow-bg-color: Background color of the overflow menu. Defaults to var(--nano-color-grey-mono-1600);
    * @prop --overflow-text-color: Text color of the overflow menu. Defaults to var(--nano-color-basic-white);
    * @prop --overflow-hover-text-color: Hover text color of the overflow menu. Defaults to var(--nano-color-blue-cerulean-700);
    * @prop --overflow-active-text-color: Active text color of the overflow menu. Defaults to var(--nano-color-blue-cerulean-300);
    */
-  --main-menu-bar-bg-color: var(--nano-color-base-0);
-  --main-menu-text-color: var(--nano-color-base-1000);
-  --main-menu-hover-text-color: var(--nano-color-primary-1000);
-  --main-menu-active-text-color: var(--nano-color-primary-1200);
-  --main-menu-active-border-color: var(--nano-color-primary-1000);
+  --main-menu-bar-bg-color: var(--nano-color-background-default);
+  --main-menu-text-color: var(--nano-color-text-default);
+  --main-menu-hover-text-color: var(--nano-color-text-hover);
+  --main-menu-active-text-color: var(--nano-color-text-primary);
+  --main-menu-active-border-color: var(--nano-color-border-accent);
   --overflow-bg-color: var(--nano-color-grey-mono-1600);
   --overflow-text-color: var(--nano-color-basic-white);
-  --overflow-hover-text-color: var(--nano-color-blue-cerulean-700);
-  --overflow-active-text-color: var(--nano-color-blue-cerulean-300);
+  --overflow-hover-text-color: var(--nano-color-text-hover);
+  --overflow-active-text-color: var(--nano-color-text-primary);
   display: block;
   color: var(--main-menu-text-color);
 }
@@ -119,7 +119,7 @@ nano-badge {
   inset-inline: 0;
   inset-block-end: -1px;
   z-index: -3;
-  background-color: var(--nano-color-neutral-200);
+  background-color: var(--nano-color-border-default);
 }
 
 .gn__menu-bar {
@@ -178,7 +178,7 @@ nano-badge {
   inline-size: 1px;
   block-size: 100%;
   inset-inline-end: 0;
-  background-color: var(--nano-color-neutral-300);
+  background-color: var(--nano-color-fill-neutral-weak);
   opacity: 0.7;
   inset-block-start: 0;
 }
@@ -249,7 +249,7 @@ nano-badge {
   inline-size: 30.625rem;
 }
 .gn__search-form .nano-select {
-  --input-bg-color: var(--nano-color-neutral-200);
+  --input-bg-color: var(--nano-color-surface-subtle);
   flex: 0;
 }
 .gn__search-form .nano-select:focus-within {
@@ -278,9 +278,9 @@ nano-badge {
   --padding-start: 0.3125rem;
   --padding-top: var(--nano-spacing-sm);
   --padding-bottom: var(--nano-spacing-sm);
-  --bg-focus: var(--nano-color-primary-300);
-  --color-focus: var(--nano-color-neutral-1400);
-  --color: var(--nano-color-neutral-1400);
+  --bg-focus: var(--nano-color-fill-secondary-pressed);
+  --color-focus: var(--nano-color-text-default);
+  --color: var(--nano-color-text-default);
   font-size: var(--nano-font-size-2xs);
 }
 .gn__search-result .search__highlight {
@@ -289,9 +289,9 @@ nano-badge {
 }
 
 .gn__search-viewall {
-  --bg-focus: var(--nano-color-primary-300);
-  --color-focus: var(--nano-color-neutral-1400);
-  --color: var(--nano-color-primary-1200);
+  --bg-focus: var(--nano-color-fill-secondary-pressed);
+  --color-focus: var(--nano-color-text-default);
+  --color: var(--nano-color-fill-primary-pressed);
 }
 .gn__search-viewall::part(label) {
   justify-content: flex-end;
@@ -301,7 +301,7 @@ nano-badge {
 .gn__user-dropdown-trigger {
   all: unset;
   cursor: pointer;
-  color: var(--nano-color-primary-1200);
+  color: var(--nano-color-icon-primary);
   display: flex;
   white-space: nowrap;
   gap: var(--nano-spacing-xs);
@@ -310,10 +310,10 @@ nano-badge {
   padding-inline-start: var(--nano-spacing-md);
 }
 .gn__user-dropdown-trigger:hover {
-  color: var(--main-menu-hover-text-color);
+  color: var(--nano-color-icon-primary-hover);
 }
 .gn__user-dropdown-trigger:active {
-  color: var(--main-menu-active-text-color);
+  color: var(--nano-color-icon-primary);
 }
 .gn__user-dropdown-trigger:focus-visible {
   outline: var(--nano-focus-ring);
@@ -325,7 +325,7 @@ nano-badge {
   inline-size: 1px;
   block-size: 100%;
   inset-inline-start: 0;
-  background-color: var(--nano-color-neutral-300);
+  background-color: var(--nano-color-fill-subtle);
   opacity: 0.7;
   inset-block-start: 0;
 }
@@ -351,6 +351,7 @@ nano-badge {
   max-inline-size: 21.25rem;
   color: var(--overflow-text-color);
   padding: var(--nano-spacing-md);
+  background-color: var(--nano-color-surface-subtle);
 }
 .gn__user-panel a {
   color: var(--overflow-text-color);

package/dist/collection/components/global-nav/global-nav.js

@@ -464,7 +464,7 @@ export class GlobalNav {
                 '')), h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
             link.address.includes(this.msgUrl) ||
             this.msgUrl.includes(link.address)) &&
-            this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (h("button", { onClick: this.logoutUrl }, "Logout"))))));
+            this.msgCount > 0 && (h("nano-badge", { theme: "danger" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.logoutUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")) : (h("button", { onClick: this.logoutUrl }, "Logout"))))));
     }
     bpPartials = {
         contact: {
@@ -506,21 +506,21 @@ export class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '1d15ddb44d49d6e8d9bd8e6179cdefaee729d800', class: {
+        return (h(Host, { key: '690ad4fb8f24cfb37689e8033069c43692ffb0f6', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '30dfb51cf5f539a91b388d3284f7e167834c1f66', class: {
+            } }, h("div", { key: '7dc0a5a9543a461a9cf06c5536dcf04058725309', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: 'eb0e9d0fa7d42473267fc5b465201b78322303b4', 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: '22fef7c9b69aff7a3678900c45824ae8dae74f31', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '5ac9edc335d61308f1779e872f2600671322b35c', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: '8df19d73baf12de72803029bcb339b055b911e23', 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: '66f9d33e3b5949af60b1304c1290a2409b35dceb', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '9a75fd50fdc75191893d230d4541e8065054e306', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '600ef94c796db36e84e5ce57a74d826508336369', name: "overflow" }))), h("div", { key: '7df8f3b3865b6bfda36953f8d12d1dc405420948', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aa8f39a6b742f77bb1c277fec54144f5cb567619', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'a2a316bd2bffb7977ff45e4e947599ee4169a626', "aria-label": "Global navigation", 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: '42bec05328c771483904ec4d4f31b3417e593db2', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '98e18d03956ac5f8361c3b5d5eef4beca732ee3a', name: "logo" }, h("a", { key: '62f72a5bde4108682687fef1a4c17a45ea94a98e', 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: '4dec3baf8d3085297d1fcbf943bac0509f9bb5af', name: "overflow" }))), h("div", { key: 'edeb6fcc2fc4060e7c228c6b911dd1d399545f16', class: "gn__menu-bar-wrapper" }, h("div", { key: '84267ef880c126263be73733f3e534d5657985a7', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'd8eb12840a941fb81c170058b32f7effb79c5eba', "aria-label": "Global navigation", 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: '6a11d0743bac742391f8f2e987d293df870e1e01', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02690cb93ba4db6c31add029f398d2b9b5e9cc4c', name: "logo" }, h("a", { key: 'dda06ea1320291a5b0174042914e9e5bddd1f272', 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: "35", 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: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'add2e395a8573a07aa28f595d824662bfc8d38f9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '46d421a37bcc66167602b7fdd07ac969ecc0a647', class: "gn__main-menu-actions" }, !this.myAccountData ||
-            (!!this.searchIndices.length && (h("nano-dropdown", { key: 'fcb0f16d3ace74755729794e34e92374590eab68', 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: '1f3d7e195ad4c9ede976b7e09d03df4e700640af', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '775e27d09ddd5a7d7ab196a9139d679df85c5f31', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'f682d7d3823d43fe4a347f7d971a842153487a9c', 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: '94b870076f8d6e1d4a92ce1662b5d90a893bfd31', 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) => {
+                            (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: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '7374a1027ea9677356301a7ef365c05639ac0055', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7b5844cb33637ad77785bc9d46a2272053290c9e', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (h("nano-dropdown", { key: '735db145b688f7ccf532acf1aa56eae1ed7a0bec', 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: 'f965f682dec1e34a0d3d573a081054fbf78c6fe2', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'fbab37529deefdb095f592a34eef51e5c9b7a529', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '213618c5d41621a9ac3bd2f0211dece4f7e26dff', 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: '58b1ef502a1c59dbd4215361782454954074a159', 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-button", { key: 'a993617eca8ea8ba6fb893ca0df1b36567ae650f', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'b80f7cdc8230e33f954e576ba266cf15817ea0e0', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '946b0eb00b7ee2c0de28e3c4937872f35a172225', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e967d62cca0152014c1f7b2d1e22e898b1900898' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '50403eb32e74646ec1c6ace40671b6c6add9c3a7', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '104f3771bfb0bf6e7af94173ad4d290c7f339740', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '178ae5411f8e5a646390fa5d93ca765b9d421803', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '56a6a81b3d0dc6a938d4a05ade52260bd1ffaafb' }, "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,
@@ -530,13 +530,13 @@ export class GlobalNav {
                             positions: [i + 1],
                         });
                     } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-                h("nano-option", { key: 'd5080b4806b092a6a249dc5f74fc77f843c9a417', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-            ])))))), h("div", { key: 'baefbc8101a45eab3bf67ea54f10bc92820f9473', class: "gn__cart" }, this.cartUrl && [
-            h("nano-icon-button", { key: 'c00072ef4a40eb2d4ffe475098a08f650f113e8c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
-            !!this.cartCount && (h("nano-badge", { key: '9431e046412770f12754c1043fbc9316ef41c302', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount)),
+                h("nano-option", { key: '0d6d3c61ce7bed27aded81d3332f595185883aca', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), h("div", { key: 'c597dba756ae0a4a995dc02ecd732f5b9b71d28c', class: "gn__cart" }, this.cartUrl && [
+            h("nano-icon-button", { key: '473a48ab2ce258e301ec10ca6ba46076933435d0', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
+            !!this.cartCount && (h("nano-badge", { key: '535ce44688a0459eb1189a464d72f43c05f0e868', theme: "danger" }, 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" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'ff4246d6110809972a0207981f3c09c7ee925e54', part: "site-search-results" }, h("div", { key: '95caefde60103a7d5f28b7887342f31a053e5c5a', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'e9d50fd85ef94d913212b6b201026ee4f2069791' }))))));
+            : '', 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" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'ff1eb9ee71e119f9bf2b292bcfc9fea6138accdd', part: "site-search-results" }, h("div", { key: '56e3c1ecb8aa0bd1776164406e684a8c5d8e60dc', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '78de4f8b640ae63423f90428fe01ae2ba545bdfd' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }