@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/components/nano-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NanoTag extends Components.NanoTag, HTMLElement {}
+export const NanoTag: {
+    prototype: NanoTag;
+    new (): NanoTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-tag.js

@@ -0,0 +1,9 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { N as NanoTag$1, d as defineCustomElement$1 } from './tag.js';
+
+const NanoTag = NanoTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoTag, defineCustomElement };

package/dist/components/nano-tooltip.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
 
@@ -7,5 +7,3 @@ const NanoTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoTooltip, defineCustomElement };
-
-//# sourceMappingURL=nano-tooltip.js.map

package/dist/components/nav-item.js

@@ -1,14 +1,86 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { b as getSiblings, g as getDirectChildren } from './dom.js';
-import { d as displayTransition } from './transitions.js';
+import { g as getDirectChildren } from './dom.js';
 import { g as getTabbableElements } from './tabbable.js';
 import { t as transformTag, h } from './renderer.js';
+import { H as HasSlotController } from './slot.js';
+import { f as focusInContainer } from './active-element.js';
 
-const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(.nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(.nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(.nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(.nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(.nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:transform 0.2s ease}:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before,:host(.nano-global-nav-bar.selected) button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
-const NanoNavItemStyle0 = navItemCss;
+/**
+ * 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)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}";
 
 const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLElement {
     constructor() {
@@ -19,313 +91,192 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         this.nanoOpen = createEvent(this, "nanoOpen", 7);
         this.nanoOpening = createEvent(this, "nanoOpening", 7);
         this.nanoClosing = createEvent(this, "nanoClosing", 7);
-        this.nanoBlur = createEvent(this, "nanoBlur", 7);
-        this.nanoFocus = createEvent(this, "nanoFocus", 7);
     }
-    hasSecondarySlot = false;
-    btn;
-    fromHover;
-    animating = false;
-    waitHide;
-    waitShow;
-    globalNavEle;
     secondaryDiv;
-    hasAnchorEle = false;
+    slotCtrl = new HasSlotController(this, 'secondary', 'close-button');
+    controlElement;
+    get host() { return this; }
     didOpen = false;
-    isInGlobalNav = false;
     isInMenuDrawer = false;
-    isInMenu = false;
-    hasFocus = false;
-    get el() { return this; }
-    /**
-     * Href to link to
-     */
+    /** Href to link to. Alternatively, slot an `<a>` element */
     href = null;
-    /**
-     * Target to use for links
-     */
+    /** Target to use for links */
     target = '_self';
-    /**
-     * Disable the nav item
-     */
+    /** Disable the nav item */
     disabled = false;
-    /**
-     * Whether a secondary menu should be or is currently open
-     */
+    /** Whether a secondary menu should be or is currently open */
     open = false;
-    /**
-     * Whether this menu item is currently 'selected'
-     */
+    /** Whether this menu item is currently 'selected' */
     selected = false;
-    /**
-     * Screen pixel width to activate the secondary menu
-     */
-    secondaryActiveWidth = 0;
-    /**
-     * Secondary fallback function for when the secondary menu is no longer active.
-     */
-    secondaryFallback = () => { };
-    /**
-     * Whether secondary menus should close on blur
-     */
+    /** Changes behaviour so automatically becomes `selected` onClick */
+    checkbox = false;
+    /** Whether secondary menus should close on blur */
     closeOnBlur = true;
-    /**
-     * Will show an indicator badge - only when placed in a nano-menu-draw
-     */
+    /** Will show an indicator badge - only when placed in a nano-menu-draw */
     notification = false;
-    /**
-     * Emitted when the nav item closes it's secondary navigation.
-     */
+    /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
-    /**
-     * Emitted when the nav item opens it's secondary navigation.
-     */
+    /** Emitted when the nav item opens it's secondary navigation. */
     nanoOpen;
-    /**
-     * Emitted when the nav item is about to open it's secondary navigation.
-     */
+    /** Emitted when the nav item is about to open it's secondary navigation. */
     nanoOpening;
-    /**
-     * Emitted when the nav item is about to close it's secondary navigation.
-     */
+    /** Emitted when the nav item is about to close it's secondary navigation. */
     nanoClosing;
-    /**
-     * Emitted when the nav item loses focus.
-     */
-    nanoBlur;
-    /**
-     * Emitted when the nav item has focus.
-     */
-    nanoFocus;
     /**
      * Sets focus on the first button or anchor present. Use this method instead of the global
      * `element.focus()`.
      */
     async setFocus() {
-        if (!this.btn)
+        if (!this.controlElement)
             return;
-        this.btn.focus();
+        this.controlElement.focus();
     }
-    /**
-     * Public open watcher
-     */
     openChange() {
+        if (!this.slotCtrl.has('secondary'))
+            return;
         if (this.open)
             this.openSecondary();
         else
             this.closeSecondary();
     }
-    /**
-     * Internal open watcher
-     */
     didOpenChange() {
-        if (!this.hasSecondarySlot)
+        if (!this.slotCtrl.has('secondary'))
             return;
         if (!this.didOpen) {
-            /* the secondadry panel is not closing via hover,
-            remove blur events, add focus back to originating button */
-            setTimeout(() => {
-                if (!this.fromHover &&
-                    (!document.activeElement || document.activeElement === document.body))
-                    this.btn.focus({ preventScroll: true });
-                this.el.tabIndex = null;
-                this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
-            }, 50);
+            /* closing. Remove blur events, add focus back to originating button */
+            if (focusInContainer(this.host, this.controlElement)) {
+                this.controlElement.focus({ preventScroll: true });
+            }
+            this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
+            return;
         }
-        else {
-            /* the secondary panel is not opening via hover,
-            scroll content into view, focus on it and add blur events */
-            if (!this.fromHover) {
-                const panelIO = new window.IntersectionObserver((data) => {
-                    if (data[0].boundingClientRect.top < 0) {
-                        this.secondaryDiv.scrollIntoView({
-                            behavior: 'smooth',
-                        });
-                    }
-                    panelIO.disconnect();
-                }, { threshold: 1 });
-                panelIO.observe(this.secondaryDiv);
-                this.secondaryDiv.focus({ preventScroll: true });
-                const focusableChild = getTabbableElements(this.secondaryDiv, true);
-                if (focusableChild[0])
-                    focusableChild[0].focus();
-                this.el.tabIndex = -1;
-                this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });
+        // opening
+        /* scroll content into view, focus on it */
+        const panelIO = new window.IntersectionObserver((data) => {
+            if (data[0].boundingClientRect.top < 0) {
+                this.secondaryDiv.scrollIntoView({
+                    behavior: 'smooth',
+                });
             }
+            panelIO.disconnect();
+        }, { threshold: 1 });
+        panelIO.observe(this.secondaryDiv);
+        this.secondaryDiv.focus({ preventScroll: true });
+        const focusableChild = getTabbableElements(this.secondaryDiv, true);
+        if (focusableChild[0]) {
+            focusableChild[0].focus({ preventScroll: true });
         }
+        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });
     }
     handleClose(e) {
-        if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur)
+        if (!this.didOpen || !this.slotCtrl.has('secondary') || !this.closeOnBlur)
             return;
-        if (!e.composedPath().some((el) => el === this.secondaryDiv))
-            this.toggleSecondary();
+        if (e.key && e.key === 'Escape') {
+            this.closeSecondary();
+            return;
+        }
+        if (!e.composedPath().some((el) => el === this.secondaryDiv)) {
+            this.closeSecondary();
+        }
     }
     closeSecondary = async () => {
-        if (!this.hasSecondarySlot || !this.didOpen)
+        if (!this.slotCtrl.has('secondary') || !this.open)
             return;
         this.open = false;
         await displayTransition(this.secondaryDiv, {
-            className: 'open',
+            className: 'modal--open',
+            showProp: 'part',
             show: false,
         });
         this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = false;
     };
     openSecondary = async () => {
-        if (window.innerWidth < this.secondaryActiveWidth) {
-            this.secondaryFallback.call(this);
-            return;
-        }
-        if (!this.hasSecondarySlot || this.didOpen)
+        if (!this.slotCtrl.has('secondary') || this.open)
             return;
         this.open = true;
         await displayTransition(this.secondaryDiv, {
-            className: 'open',
+            className: 'modal--open',
+            showProp: 'part',
             show: true,
         });
         this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = true;
     };
     toggleSecondary = () => {
-        if (!this.hasSecondarySlot)
+        if (!this.slotCtrl.has('secondary'))
             return;
         if (this.didOpen)
             this.closeSecondary();
         else
             this.openSecondary();
     };
-    handleFocus = () => {
-        this.hasFocus = true;
-        // opens secondary panel when activated via hover
-        if (this.href && !this.animating && this.hasSecondarySlot)
-            this.openSecondary();
-        this.nanoFocus.emit();
-    };
-    handleHostBlur = () => {
-        if (this.animating)
-            return;
-        // tab index is added to host when secondary panel opens
-        // to return focus after secondary panel closes. Remove now if it was added
-        this.el.removeAttribute('tabindex');
-        this.hasFocus = false;
-        this.nanoBlur.emit();
-    };
-    // direct host clicks to internal button
-    handleHostClick = (ev) => {
-        if (!this.hasAnchorEle)
-            return;
-        const foundlink = ev.target.closest('a, button');
-        if (!foundlink)
-            this.btn.click();
-    };
-    // handles secondary menu hover behaviour.
-    handleMouseEnter = async () => {
-        if (!this.href ||
-            this.animating ||
-            !this.hasSecondarySlot ||
-            (this.globalNavEle && !this.globalNavEle.classList.contains('ready')))
+    handleClick = () => {
+        if (this.disabled)
             return;
-        // if there are sibling secondary panels currently open,
-        // we need to wait before opening otherwise we get unwanted overlapping
-        let timeToWait = 0;
-        if (getSiblings(this.el, '.secondary-open.has-secondary').length)
-            timeToWait = 300;
-        clearTimeout(this.waitHide);
-        this.fromHover = true;
-        this.animating = true;
-        this.waitShow = window.setTimeout(async () => await this.openSecondary(), timeToWait);
-        this.animating = false;
-    };
-    // handles secondary menu hover-out behaviour.
-    handleMouseLeave = () => {
-        if (!this.href)
+        if (this.slotCtrl.has('secondary')) {
+            this.toggleSecondary();
             return;
-        clearTimeout(this.waitShow);
-        this.fromHover = true;
-        this.animating = true;
-        // prevent closing immediately - makes navigating to items within more forgiving
-        this.waitHide = window.setTimeout(async () => await this.closeSecondary(), 300);
-        this.animating = false;
+        }
+        if (this.checkbox) {
+            this.selected = !this.selected;
+        }
     };
-    handleClick = () => {
-        this.fromHover = false;
-        if (this.hasSecondarySlot)
-            this.toggleSecondary();
+    handleDefaultSlotChange = () => {
+        const slottedA = getDirectChildren(this.host, 'a')[0];
+        if (slottedA) {
+            this.href = slottedA.getAttribute('href');
+            const label = document.createElement('span');
+            slottedA.childNodes.forEach((el) => {
+                label.append(el);
+            });
+            this.host.append(label);
+            slottedA.remove();
+        }
     };
     connectedCallback() {
-        const secondaryEle = this.el.querySelector('[slot="secondary"]');
-        this.hasSecondarySlot = !!secondaryEle;
-        const link = getDirectChildren(this.el, 'a, button')[0];
-        this.hasAnchorEle = !!link;
-        if (link) {
-            this.href = link.href
-                ? link.href
-                : null;
-            this.btn = link;
-            if (this.hasSecondarySlot)
-                this.btn.addEventListener('click', this.toggleSecondary);
-            this.btn.addEventListener('focus', this.handleFocus);
-            this.btn.addEventListener('blur', this.handleHostBlur);
-        }
-        this.isInGlobalNav = false;
-        this.isInMenuDrawer = false;
-        this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));
-        this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));
-        this.isInMenu = !!this.el.closest(transformTag('nano-menu'));
-        this.isInGlobalNav =
-            this.el.parentElement === this.globalNavEle ||
-                !!this.el.closest('.global-nav');
+        this.handleDefaultSlotChange();
+        this.isInMenuDrawer = !!this.host.closest(transformTag('nano-menu-drawer'));
     }
     componentDidLoad() {
         this.openChange();
     }
-    disconnectedCallback() {
-        this.btn.removeEventListener('click', this.toggleSecondary);
-        this.btn.removeEventListener('focus', this.handleFocus);
-        this.btn.removeEventListener('blur', this.handleHostBlur);
-    }
     render() {
-        return (h(Host, { key: '5919fe6851a8132a0da2c592c6adf977113c3983', class: {
-                'has-secondary': this.hasSecondarySlot,
-                'secondary-open': this.open,
-                selected: this.selected,
-                'has-focus': this.hasFocus,
-                disabled: this.disabled,
-                'nano-global-nav': this.isInGlobalNav,
+        return (h(Host, { key: '7554eb7a4a66fc4f899b40b35265245a3be931f8', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
-                'nano-menu': this.isInMenu,
                 'nano-nav-item': true,
-            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, h("div", { key: 'a05002c6eae1e2107453b02f91f6d7467744bc94', class: {
-                'nav-item': true,
-                'secondary-open': this.open,
-                selected: this.selected,
-            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { key: '7ee0a4a54692664dd7b9d1f9e3d20215542929b3', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
+                disabled: this.disabled,
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '4bf288ec9f9162bb746b70b085fde42b871f93fb', class: {
+                navitem: true,
+                'navitem--open': this.open,
+                'navitem--active': this.selected,
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'a9bf5adf3da060452ed58e2c6e1eba45168815a3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+                navitem__trigger: true,
                 notification: this.notification,
-            } }, h("slot", { key: '7795fd5db028cd67ba1511619a5be68dc1f3ed51', name: "icon-start" }), h("span", { key: 'e5373722117ca7adc74c0dc59fca8e20f6503099', class: "text" }, h("slot", { key: 'e1e1ebb8b1b18245fb1fff5795ba8c31c967d399' })), h("slot", { key: '63dc5d008a47f44c292ac17bb061944f488b176e', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: 'cd84e3be0022646f164e52663b4b1266c08d582f', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
+            } }, h("slot", { key: '47cdd2e84dd51f236675351c599d8e9f9bf66ede', name: "icon-start" }), h("span", { key: 'a15d804a252ed532501fb08536ed5ce8a3b42e47', class: "navitem__label", part: "label" }, h("slot", { key: 'ea37d813d0fd15bd457930b61d06cd97d64fce35', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '384a3212fba3d0cc3d488974dcaf53c23c3942e1', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '698c4beb9cddb3b2037db40b5c9e33a276dad060', 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: {
+                navitem__trigger: true,
                 notification: this.notification,
-            } }, h("slot", { key: '9ae194d22d839cf97257c01b1fca424bb4b8e6d1', name: "icon-start" }), h("span", { key: 'eff83bc860b026e62a57b4eede50913d65eabf06', class: "text" }, h("slot", { key: '41996ab72195124b483872ec231a5ca74fc73f9e' })), h("slot", { key: '1ef36027a860dfcf86e0f9f7c90ec49053fad9ff', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: '5c9ab8780e84391ef3b2b1350a8b89e7343b635a', class: "link" }, h("slot", { key: 'a673392b8038993b07c9bcff7312ca63ce077738', name: "icon-start" }), h("slot", { key: '7678cd1e024dc47694849ef3fd2ab89138857675' }), h("slot", { key: '15cedad4ab1d11c4fc0ce7d1867db7bfd59cccd3', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: '8c274fc1b47d8365321105ed13233abaa77bf408', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'f25ebc76515bdce5a8f04119da028b11acc0c9df', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: '8d38f82ab2ebb96ec60d07716309ebc2b45d8f3b', name: "secondary" })), h("div", { key: '07404964bfdce1b0ed694308524f9eef30454efa', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
+            } }, h("slot", { key: 'c01a71dfaeb867d2792146110fdde1dd134b7f71', name: "icon-start" }), h("span", { key: '6a48071ba10f1407350e87958ed491f704714ea8', class: "navitem__label", part: "label" }, h("slot", { key: '246f807c0a03a8805fea87023f48de2f5fa7a7a0', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '6a246213800a4425464ac41aefe9362e327d412f', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '8928988fd43de734785801c9fc7707fb7efa33c3', part: "modal", class: {
+                navitem__modal: true,
+                'navitem__modal--open': this.didOpen,
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'eca197afa8cb297eeafc4b7a55ffb6fb288c498c', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '5a774cf15677b3848f80c0cf5bee87da44e3ca04', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '57a08ef1239b6c29241524e3c7ac977c78c910d5', name: "close-button" }))), h("slot", { key: '6c35ed89b61461fcc294cddc022c57255558a63b', name: "secondary" })), h("div", { key: '163003649197f1ed341836e73e7acd50c7abc640', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]
     }; }
-    static get style() { return NanoNavItemStyle0; }
+    static get style() { return navItemCss; }
 }, [1, "nano-nav-item", {
-        "href": [1025],
+        "href": [1537],
         "target": [1],
-        "disabled": [4],
+        "disabled": [516],
         "open": [1540],
-        "selected": [516],
-        "secondaryActiveWidth": [2, "secondary-active-width"],
-        "secondaryFallback": [16],
+        "selected": [1540],
+        "checkbox": [516],
         "closeOnBlur": [4, "close-on-blur"],
         "notification": [4],
-        "hasAnchorEle": [32],
         "didOpen": [32],
-        "isInGlobalNav": [32],
         "isInMenuDrawer": [32],
-        "isInMenu": [32],
-        "hasFocus": [32],
         "setFocus": [64]
     }, [[16, "click", "handleClose"], [16, "keyup", "handleClose"]], {
         "open": ["openChange"],
@@ -346,5 +297,3 @@ function defineCustomElement() {
 }
 
 export { NavItem as N, defineCustomElement as d };
-
-//# sourceMappingURL=nav-item.js.map