@nanoporetech-digital/components 9.0.0 → 9.1.0

package/dist/cjs/nano-tab-group.cjs.entry.js

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var dom = require('./dom-Dxk5vXYq.js');
-var componentStore = require('./component-store-C5eBOK0w.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var dom = require('./dom-CIEcUG2R.js');
+var componentStore = require('./component-store-DFsNILxg.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 require('./throttle-CrRDOkln.js');
 
 const tabGroupCss = ":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{--border:2px solid var(--nano-color-border-default);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-border-accent);--indicator-track-color:var(--nano-color-border-default);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";

package/dist/cjs/nano-tab.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const tabCss = ":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{--border:2px solid var(--nano-color-border-default);--border-hover-color:var(--nano-color-border-accent-hover);--border-active-color:var(--nano-color-border-accent);--text-hover-color:var(--nano-color-text-hover);--text-active-color:var(--nano-color-text-primary);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-text-default);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-background-default);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{all:unset;padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab[href]:focus{outline:var(--nano-focus-ring);outline-offset:-3px}.tab.tab--disabled{opacity:0.5;cursor:not-allowed;border-color:var(--nano-color-border-disabled)}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-icon-default);--hover-color:var(--nano-color-icon-hover)}";
 

package/dist/cjs/nano-table.cjs.entry.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const tableCss = ".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 

package/dist/cjs/{renderer-jVpDRMfV.js → renderer-bX7EsIYR.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 /* eslint-disable @typescript-eslint/no-namespace */
 // css only components cannot be transformed because their static css relies on the tag name

package/dist/cjs/{scroll-C6pO9RvO.js → scroll-DC2gHZby.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dom = require('./dom-Dxk5vXYq.js');
+var dom = require('./dom-CIEcUG2R.js');
 
 /**
  * @returns the width of the document's scrollbar

package/dist/cjs/{slot-CfuOT0U4.js → slot-BRAzxuj_.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 /**
  * Given an element (which can either be within a shadowRoot or not) find it's innerText

package/dist/cjs/{tabbable-C-YwPfjA.js → tabbable-BXxsn02Z.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-DGttnXif.js');
+require('./index-C7Ikbhe3.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-B-rQpQoz.js → table.worker-CZYVrH2c.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-UXM5xpCO.js');
-require('./index-DGttnXif.js');
-require('./renderer-jVpDRMfV.js');
+var nanoDataTable_entry = require('./nano-data-table-DRp3MvIh.js');
+require('./index-C7Ikbhe3.js');
+require('./renderer-bX7EsIYR.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-C6pO9RvO.js');
-require('./dom-Dxk5vXYq.js');
-require('./index-CkLcAUj-.js');
+require('./scroll-DC2gHZby.js');
+require('./dom-CIEcUG2R.js');
+require('./index-gxQOxlH_.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/collection-manifest.json

@@ -47,6 +47,8 @@
     "components/input-otp/input-otp.js",
     "components/intersection-observe/intersection-observe.js",
     "components/masked-overflow/masked-overflow.js",
+    "components/mdd/mdd-item.js",
+    "components/mdd/mdd.js",
     "components/menu-drawer/menu-drawer.js",
     "components/more-less/more-less.js",
     "components/option-box/option-box.js",

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "references": {
                         "Breadcrumb": {
                             "location": "local",
-                            "path": "/builds/zUbCqThW/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

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

@@ -164,6 +164,20 @@ export class GlobalNav {
             this.shouldResize === false) {
             this.overflowOpen = false;
         }
+        this.setNavItemHover();
+    }
+    setNavItemHover() {
+        const isBarMenu = this.breakpoint <= this.bpPartials.mainMenu.breakpoint;
+        this.host
+            .querySelectorAll('nano-nav-item')
+            .forEach((el) => {
+            el.openOnHover = isBarMenu;
+        });
+        this.host
+            .querySelectorAll('nano-mdd')
+            .forEach((el) => {
+            el.accordion = !isBarMenu;
+        });
     }
     debounceResetResize = debounce(() => {
         this.shouldResize = false;
@@ -450,6 +464,7 @@ export class GlobalNav {
     }
     componentDidRender() {
         this.handleResize();
+        this.setNavItemHover();
     }
     /// RENDER ///
     loggedInPanel() {
@@ -506,21 +521,21 @@ export class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '690ad4fb8f24cfb37689e8033069c43692ffb0f6', class: {
+        return (h(Host, { key: '53c751962d1ed36bae13be0a3c74b340b4a553bd', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '7dc0a5a9543a461a9cf06c5536dcf04058725309', class: {
+            } }, h("div", { key: '40ab68a79d28c8ace97c06f3b1d1222e1c21cf0e', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, 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
+            } }, h("nano-drawer", { key: '7a4b70e3364f66678843c3b66a46a11b4018d26c', 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: '49a9b1c0de594cbe45f844d16be862fb84b27776', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'af7cabec8e9897f5e48d0a3a0c5e47f23b4cf151', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', 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,
+            : '', h("slot", { key: '25b6d6721170837ae7c908d7db7f3ac0507c0775', name: "overflow" }))), h("div", { key: 'c2ea4f60360ed705d8fefa86712d9fa1fdacb8c6', class: "gn__menu-bar-wrapper" }, h("div", { key: '504deb61564e7de04cf6c437a1692fd456d6bf38', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'd83c1e1397e054aac75a7942d0b49c9ea012e1c0', "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: '201f58efe6e86cef00e45f43b74b805d997e4647', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '2370a4105d6462c6b19a9cd407aa6ad0616f53b4', name: "logo" }, h("a", { key: '82cfdc19c8521f251d9cec4671f8623c4dbd0b42', 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: '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) => {
+                            (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: '7c43301ad5c735c8dae4081d2bb91fef7db41762', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '12285c67b6773c7bc31897cb0752fb4db549a162', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f7845d92127df80f548ae65573725b2c1497b703', 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: '6ca7605ce6e9829b6155f3e17d9262db9d452642', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'aba9d208a95acae67b2e2d05b6cbf39ac6aed329', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7d6894101fb8e74e90c712f8768926e4604468bb', 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: '8ae65dcf14ec20041c3152fe875923a1bf19ab4e', 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: '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 && [
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'f232ad693769e872e8fe8a2e42109c2ea5286e02', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'cca09389259f1b63a607a7a0e667f839ae9a2904', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '6a134d0b971806091e973f7c8c1b5ef79ddfab5a', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '2bb8c2c2a7351cc1d95be9517d4c4db687c11c49' }, "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 +545,13 @@ export class GlobalNav {
                             positions: [i + 1],
                         });
                     } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-                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)),
+                h("nano-option", { key: '0f453d14dada8aff48749a7fb99ceee46ad4d3ef', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), h("div", { key: '44b96146b2cd8d71c832e5f400a3de65cd1a8f04', class: "gn__cart" }, this.cartUrl && [
+            h("nano-icon-button", { key: '1745e9090c7850789417d70b82ce25b2661b556c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
+            !!this.cartCount && (h("nano-badge", { key: '997946ee187bba74e880ab485f1a8e43cc74f707', 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" }, 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' }))))));
+            : '', 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: '41a5c6ee1257b595b391d711841dbab6d6c5ecc0', part: "site-search-results" }, h("div", { key: '94418390bfa82f913fa521e5612effe53b319ab4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'd0c7c41fb54d7d57d44a0ae9a79216a4f1780675' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mdd/mdd-item.css

@@ -0,0 +1,144 @@
+: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;
+    }
+  }nano-mdd-item {
+  display: block;
+}
+nano-mdd-item a:not(nano-content-links a) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nano-spacing-xs);
+  color: var(--nano-color-base-1000);
+  text-decoration: none;
+}
+@media (width < 1200px) {
+  nano-mdd-item a:not(nano-content-links a) {
+    font-size: var(--nano-font-size-xs);
+  }
+}
+nano-mdd-item a:not(nano-content-links a):hover {
+  text-decoration: underline;
+  color: var(--nano-color-primary-1000);
+}
+nano-mdd-item a:not(nano-content-links a) > p {
+  color: var(--nano-color-neutral-1000);
+  font-size: var(--nano-font-size-xs);
+  letter-spacing: var(--nano-letter-spacing-denser);
+  margin: 0;
+}
+@media (width < 1200px) {
+  nano-mdd-item a:not(nano-content-links a) > p {
+    font-size: var(--nano-font-size-2xs);
+  }
+}
+nano-mdd-item ul {
+  margin: 0;
+  padding: 0;
+}
+nano-mdd-item ul li {
+  margin-inline: 0;
+  list-style: none;
+  margin-block-end: var(--nano-spacing-l2);
+  line-height: var(--nano-line-height-dense);
+}
+nano-mdd-item .md__link-columns {
+  gap: var(--nano-spacing-xl);
+}
+nano-mdd-item .md__link-columns:has(> :nth-child(6)) {
+  columns: 2;
+}
+nano-mdd-item .md__link-columns > * {
+  display: block;
+  margin-block-end: var(--nano-spacing-l2);
+}
+nano-mdd-item:not([accordion]) [slot=label] {
+  display: block;
+  color: var(--nano-color-text-neutral);
+  font-size: var(--nano-font-size-2xs);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  margin-block-end: var(--nano-spacing-md);
+}
+nano-mdd-item:not([accordion]) [slot=label]::after {
+  content: "";
+  display: block;
+  padding-block-start: var(--nano-spacing-md);
+  border-block-end: 1px solid rgb(var(--nano-color-base-rgb-1000)/30%);
+}
+nano-mdd-item:not([accordion]) .mdd-item__body {
+  display: flex;
+  flex-direction: column;
+}
+nano-mdd-item[accordion] .md__link-columns {
+  padding-inline-start: var(--nano-spacing-md);
+  columns: 1 !important;
+}
+nano-mdd-item[accordion] nano-details {
+  border: none;
+  border-block-start: 1px solid var(--nano-color-neutral-300);
+}
+nano-mdd-item[accordion]:last-child nano-details {
+  border-block-end: 1px solid var(--nano-color-neutral-300);
+}
+
+.mdd__view-all {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25em;
+  color: var(--nano-color-primary-1100);
+  font-size: var(--nano-font-size-2xs);
+  text-decoration: underline;
+}
+.mdd__view-all::after {
+  content: "";
+  display: block;
+  flex-shrink: 0;
+  inline-size: 1em;
+  block-size: 1em;
+  background-color: currentcolor;
+  -webkit-mask-image: var(--nano-component-icon-chevron);
+          mask-image: var(--nano-component-icon-chevron);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-size: cover;
+          mask-size: cover;
+}

package/dist/collection/components/mdd/mdd-item.js

@@ -0,0 +1,97 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+/**
+ * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+ * or as a collapsible `nano-details` in accordion mode.
+ *
+ * @slot label - the heading / title of the section
+ * @slot - the body content
+ *
+ * @part details - the underlying `nano-details` element (accordion mode only)
+ *
+ * @version 8.24.0
+ * @status experimental
+ */
+export class MddItem {
+    detailsEl;
+    host;
+    /** Controlled open state (used by nano-mdd in accordion mode) */
+    open = false;
+    /** Set by parent nano-mdd — switches between column and accordion rendering */
+    accordion = false;
+    openChanged() {
+        if (this.detailsEl)
+            this.detailsEl.open = this.open;
+    }
+    render() {
+        if (this.accordion) {
+            return (h(Host, null, h("nano-details", { ref: (el) => (this.detailsEl = el), open: this.open, size: "small", part: "details", onNanoOpen: () => (this.open = true), onNanoClose: () => (this.open = false) }, h("slot", { name: "label", slot: "label" }), h("slot", null))));
+        }
+        return (h(Host, null, h("div", { class: "mdd-item__column" }, h("div", { class: "mdd-item__label" }, h("slot", { name: "label" })), h("div", { class: "mdd-item__body" }, h("slot", null)))));
+    }
+    static get is() { return "nano-mdd-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mdd-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mdd-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state (used by nano-mdd in accordion mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "accordion": {
+                "type": "boolean",
+                "attribute": "accordion",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by parent nano-mdd \u2014 switches between column and accordion rendering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}

package/dist/collection/components/mdd/mdd.css

@@ -0,0 +1,55 @@
+: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;
+    }
+  }nano-mdd {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--nano-spacing-xl);
+}
+@media (width < 1200px) {
+  nano-mdd {
+    gap: var(--nano-spacing-l2);
+  }
+}
+nano-mdd .mdd__span-2 {
+  grid-column: span 2;
+}
+
+nano-mdd[accordion] {
+  display: block;
+}

package/dist/collection/components/mdd/mdd.js

@@ -0,0 +1,101 @@
+import { transformTag } from "../../utils/renderer";
+/**
+ * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+ * enforces accordion behaviour (only one item open at a time).
+ *
+ * @slot - `nano-mdd-item` elements
+ *
+ * @part grid - the inner grid wrapper
+ *
+ * @version 8.24.0
+ * @status experimental
+ */
+export class Mdd {
+    host;
+    /** When true, only one item can be open at a time */
+    accordion = false;
+    accordionChanged() {
+        this.syncAccordionProp();
+    }
+    /** Listen for nano-details opening (composed:true bubbles through shadow boundaries) */
+    onDetailsOpen(e) {
+        if (!this.accordion)
+            return;
+        const tag = transformTag('nano-mdd-item');
+        // find which mdd-item the opening details belongs to
+        const openedItem = e
+            .composedPath()
+            .find((el) => el.tagName?.toLowerCase() === tag);
+        if (!openedItem)
+            return;
+        // close all siblings
+        this.host
+            .querySelectorAll(tag)
+            .forEach((item) => {
+            if (item !== openedItem)
+                item.open = false;
+        });
+    }
+    syncAccordionProp() {
+        const tag = transformTag('nano-mdd-item');
+        this.host
+            .querySelectorAll(tag)
+            .forEach((item) => {
+            item.accordion = this.accordion;
+        });
+    }
+    componentDidLoad() {
+        this.syncAccordionProp();
+    }
+    static get is() { return "nano-mdd"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mdd.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mdd.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accordion": {
+                "type": "boolean",
+                "attribute": "accordion",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, only one item can be open at a time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "accordion",
+                "methodName": "accordionChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "nanoOpen",
+                "method": "onDetailsOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}