@nanoporetech-digital/components 9.0.1 → 9.1.0

package/hydrate/index.js

@@ -14894,6 +14894,20 @@ 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$2(() => {
         this.shouldResize = false;
@@ -15183,6 +15197,7 @@ class GlobalNav {
     }
     componentDidRender() {
         this.handleResize();
+        this.setNavItemHover();
     }
     /// RENDER ///
     loggedInPanel() {
@@ -15239,21 +15254,21 @@ 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,
@@ -15263,13 +15278,13 @@ 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 assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -19055,6 +19070,126 @@ class MaskedOverflow {
     }; }
 }
 
+const mddCss = ":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}";
+
+/**
+ * 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
+ */
+class Mdd {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    /** 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 watchers() { return {
+        "accordion": ["accordionChanged"]
+    }; }
+    static get style() { return mddCss; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "nano-mdd",
+        "$members$": {
+            "accordion": [516]
+        },
+        "$listeners$": [[0, "nanoOpen", "onDetailsOpen"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["accordion", "accordion"]]
+    }; }
+}
+
+const mddItemCss = ":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}";
+
+/**
+ * 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
+ */
+class MddItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    detailsEl;
+    get host() { return getElement(this); }
+    /** 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 watchers() { return {
+        "open": ["openChanged"]
+    }; }
+    static get style() { return mddItemCss; }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "nano-mdd-item",
+        "$members$": {
+            "open": [1540],
+            "accordion": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["open", "open"], ["accordion", "accordion"]]
+    }; }
+}
+
 const menuCss = ":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{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-surface-subtle);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-text-default);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";
 
 /**
@@ -24781,78 +24916,6 @@ class NanoTag {
     }; }
 }
 
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
-
- * @param el element
- * @returns a promise that resolves when the transition is done
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- *
- * @param el
- * @param options
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, options) => {
-    const opts = {
-        className: '',
-        show: true,
-        showDisplay: 'block',
-        showProp: 'classList',
-        timeout: 1000,
-        ...options,
-    };
-    return new Promise((resolve) => {
-        const showCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.dataset.displayTransition = 'true';
-                el.removeEventListener('transitionend', showCb);
-                resolve('shown');
-            }
-        };
-        const hideCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.style.display = 'none';
-                el.dataset.displayTransition = 'false';
-                el.removeEventListener('transitionend', hideCb);
-                resolve('hidden');
-            }
-        };
-        if (opts.show) {
-            el.addEventListener('transitionend', showCb);
-            el.style.display = opts.showDisplay;
-            setTimeout(() => el[opts.showProp].add(opts.className), 50);
-        }
-        else {
-            el.addEventListener('transitionend', hideCb);
-            el[opts.showProp].remove(opts.className);
-        }
-        // If no transition, resolve after timeout
-        if (opts.timeout) {
-            setTimeout(() => {
-                if (opts.show && el.dataset.displayTransition !== 'true') {
-                    el.dataset.displayTransition = 'true';
-                    el.removeEventListener('transitionend', showCb);
-                    resolve('shown');
-                }
-                else if (!opts.show && el.dataset.displayTransition !== 'false') {
-                    el.style.display = 'none';
-                    el.dataset.displayTransition = 'false';
-                    el.removeEventListener('transitionend', hideCb);
-                    resolve('hidden');
-                }
-            }, opts.timeout);
-        }
-    });
-};
-
 const navItemCss = ":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:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";
 
 /**
@@ -24892,6 +24955,11 @@ class NavItem {
     secondaryDiv;
     slotCtrl = new HasSlotController(this, 'secondary', 'close-button');
     controlElement;
+    hoverTimer = -1;
+    openedByTouch = false;
+    openedByClick = false;
+    canHover = false;
+    transitionAbort = null;
     get host() { return getElement(this); }
     didOpen = false;
     isInMenuDrawer = false;
@@ -24909,6 +24977,17 @@ class NavItem {
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
+    /** Open the secondary panel on hover (fine pointer / non-touch devices only) */
+    openOnHover = false;
+    openOnHoverChanged() {
+        this.canHover =
+            this.openOnHover &&
+                window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+        if (!this.canHover)
+            this.removeHoverListeners();
+        else
+            this.addHoverListeners();
+    }
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -24967,34 +25046,109 @@ class NavItem {
         if (!this.didOpen || !this.slotCtrl.has('secondary') || !this.closeOnBlur)
             return;
         if (e.key && e.key === 'Escape') {
+            this.openedByClick = false;
             this.closeSecondary();
             return;
         }
-        if (!e.composedPath().some((el) => el === this.secondaryDiv)) {
+        const path = e.composedPath();
+        // if click-locked, ignore clicks within the host (trigger or panel)
+        if (this.openedByClick && path.some((el) => el === this.host))
+            return;
+        if (!path.some((el) => el === this.secondaryDiv)) {
             this.closeSecondary();
         }
     }
+    addHoverListeners() {
+        this.host.addEventListener('pointerenter', this.handlePointerEnter);
+        this.host.addEventListener('pointerleave', this.handlePointerLeave);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+    }
+    removeHoverListeners() {
+        this.host.removeEventListener('pointerenter', this.handlePointerEnter);
+        this.host.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+    }
+    handlePointerEnter = (e) => {
+        if (!this.canHover || !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse') {
+            this.openedByTouch = true;
+            return;
+        }
+        this.openedByTouch = false;
+        window.clearTimeout(this.hoverTimer);
+        // if click-locked open, don't start a re-open timer
+        if (this.openedByClick && this.didOpen)
+            return;
+        this.hoverTimer = window.setTimeout(() => this.openSecondary(), 0);
+    };
+    handlePointerLeave = (e) => {
+        if (!this.canHover ||
+            this.openedByTouch ||
+            this.openedByClick ||
+            !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse')
+            return;
+        window.clearTimeout(this.hoverTimer);
+        this.hoverTimer = window.setTimeout(() => this.closeSecondary(), 200);
+    };
+    handleFocusOut = (e) => {
+        if (!this.canHover || !this.didOpen)
+            return;
+        // only close if focus left the nav-item entirely
+        if (e.relatedTarget && this.host.contains(e.relatedTarget))
+            return;
+        if (e.relatedTarget &&
+            this.host.shadowRoot?.contains(e.relatedTarget))
+            return;
+        this.closeSecondary();
+    };
+    awaitTransition(signal) {
+        return new Promise((resolve) => {
+            const fallback = window.setTimeout(() => resolve(true), 1000);
+            const cleanup = () => window.clearTimeout(fallback);
+            signal.addEventListener('abort', () => {
+                cleanup();
+                resolve(false);
+            }, { once: true });
+            this.secondaryDiv.addEventListener('transitionend', () => {
+                cleanup();
+                resolve(true);
+            }, { once: true, signal });
+        });
+    }
     closeSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || !this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = false;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: false,
-        });
+        this.secondaryDiv.part.remove('modal--open');
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
+        this.secondaryDiv.style.display = 'none';
+        this.openedByClick = false;
         this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = false;
     };
     openSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = true;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: true,
-        });
+        this.secondaryDiv.style.display = 'block';
+        window.setTimeout(() => {
+            if (!signal.aborted)
+                this.secondaryDiv.part.add('modal--open');
+        }, 50);
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
         this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = true;
     };
@@ -25010,6 +25164,15 @@ class NavItem {
         if (this.disabled)
             return;
         if (this.slotCtrl.has('secondary')) {
+            if (this.canHover) {
+                if (this.didOpen) {
+                    // already open via hover — lock it open, suppress hover-close
+                    this.openedByClick = true;
+                    return;
+                }
+                // opening via click in hover mode — lock it
+                this.openedByClick = true;
+            }
             this.toggleSecondary();
             return;
         }
@@ -25040,29 +25203,37 @@ class NavItem {
     connectedCallback() {
         this.handleDefaultSlotChange();
         this.isInMenuDrawer = !!this.host.closest(transformTag('nano-menu-drawer'));
+        this.openOnHoverChanged();
+    }
+    disconnectedCallback() {
+        window.clearTimeout(this.hoverTimer);
+        this.removeHoverListeners();
     }
     componentDidLoad() {
         this.openChange();
     }
     render() {
-        return (h(Host, { key: 'b6ce27588c1ca2ac2a42d0aada06d7f554a1174a', class: {
+        return (h(Host, { key: '5b7160c2d8712548475c34340cd654d4e17ccfbb', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e8faa3568a13feb95ef131f0bd412577120fbf84', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '92d8b0b88a51214a5fa177d20be957b61e049916', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4a4da7478db63015d0dcd81ed053146f8eeac5f3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4b0b32b1c33506ef94e1321e6b6840fa0ddc64cc', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '1eafb7864368850ad2539c402eb1b00877f3d55e', name: "icon-start" }), h("span", { key: '8953312d4dad64ced970d2f1120c07b6c36070f1', class: "navitem__label", part: "label" }, h("slot", { key: '390f468f8d1f5d4f0669cae53ef140e452b16b07', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '0694ce0708264ef1305e4b926a2f40f1875025a9', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '10b8c3c7a4903d8317f01da20a3bdf9196bc1438', name: "icon-start" }), h("span", { key: '2244f23ee2eb590f471c515243e30d5a15b38df3', class: "navitem__label", part: "label" }, h("slot", { key: '7f330c217ec16b81851e6a1ae4c37098b75cd799', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '831d05cc6a55eba753d3bb877983337e88991bd6', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '8ff3bbecbf1401830487bf116b27311d4be0d13d', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, "aria-expanded": this.slotCtrl.has('secondary')
+                ? this.didOpen.toString()
+                : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: 'c3cc4fcbb527f5f8ea2786243fe610d587e36190', name: "icon-start" }), h("span", { key: '385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171', class: "navitem__label", part: "label" }, h("slot", { key: '4e7a75c8903081856c20206aa309c2a9855991da', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '668b95901ba0b914ccc193d4f3cc4433d908c014', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d', part: "modal", class: {
+            } }, h("slot", { key: 'eb814e8de2bbec584722ab92956eef03262611d3', name: "icon-start" }), h("span", { key: '76ad3a122201c9d2cd23ba7898662e3d134b02ba', class: "navitem__label", part: "label" }, h("slot", { key: '9a6e9153990ee4ad34ed8db1f7e1aa4ad54ea587', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '6b0d010032497dd1f037e982c245891d8603da25', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'bff80914555716d7515c97535113be7aa4ad6f0a', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '70a4b002e989753c461c7dac4dd975200a92e3de', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '7b0daad80ae03a29789c9d2bef74d2473f2f1f39', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '858798062958ea0f4ee809cbf853bdb83dd4d184', name: "close-button" }))), h("slot", { key: '41583a8cc59babbfb1a9a084a3de31c61a145fbc', name: "secondary" })), h("div", { key: '5c260dca9a8fdf7951349df64a037fc7415c3c4b', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '3e7495704a435455446c243a590d82cdde632d5a', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '613887997d246e3b49f9c7c876859181c3d8089e', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '82da2c670fcda49aafb78b00603716ae7667e445', name: "close-button" }))), h("slot", { key: '8c1906a9116fcd80cd34a51d68c012982c9858cf', name: "secondary" })), h("div", { key: '3731b3264e9a15b11078df8679a885e5b5d3e5dc', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
+        "openOnHover": ["openOnHoverChanged"],
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]
     }; }
@@ -25078,6 +25249,7 @@ class NavItem {
             "selected": [1540],
             "checkbox": [516],
             "closeOnBlur": [4, "close-on-blur"],
+            "openOnHover": [4, "open-on-hover"],
             "didOpen": [32],
             "isInMenuDrawer": [32],
             "setFocus": [64],
@@ -32304,6 +32476,8 @@ registerComponents([
   InputOTP,
   IntersectionObserve,
   MaskedOverflow,
+  Mdd,
+  MddItem,
   Menu,
   MenuDrawer,
   NanoAccordion,