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

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

@@ -1,311 +1,201 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
-import { getSiblings, getDirectChildren } from "../../utils/dom";
+import { getDirectChildren } from "../../utils/dom";
 import { displayTransition } from "../../utils/transitions";
 import { getTabbableElements } from "../../utils/tabbable";
 import { h, transformTag } from "../../utils/renderer";
+import { HasSlotController } from "../../utils/slot";
+import { focusInContainer } from "../../utils/active-element";
 /**
- * Nav items to be used with the various nav items.
- * [Globla-Nav](/story/compounds-global-nav)
- * [Menu-Drawer](/story/components-menu-drawer)
- * [Dropdown](/story/components-dropdown)
+ * Nav items provide options or links for the user to pick from a menu or navigation bar.
  *
  * @slot icon-start - an icon at the start of the main control
  * @slot icon-end - an icon at the end of the main control
- * @slot secondary - a content panel in which you can place any html to display on control click
+ * @slot secondary - a content panel in which you can place any html to display on click
+ * @slot close-button - a button to close the secondary content panel
  * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)
- * @part ctrl - the controlling `<a>` or `<button>` element
- * @part ctrl--button - the controlling `<button>` element
- * @part ctrl--anchor - the controlling <a> element
- * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
+ *
+ * @part trigger - the controlling `<a>` or `<button>` element
+ * @part trigger--button - the controlling `<button>` element
+ * @part trigger--anchor - the controlling <a> element
+ * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
  * @part secondary-wrapper - the div surrounding slotted secondary content
  * @part secondary-mask - the div that is added when secondary content is shown
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export class NavItem {
-    hasSecondarySlot = false;
-    btn;
-    fromHover;
-    animating = false;
-    waitHide;
-    waitShow;
-    globalNavEle;
     secondaryDiv;
-    hasAnchorEle = false;
+    slotCtrl = new HasSlotController(this, 'secondary', 'close-button');
+    controlElement;
+    host;
     didOpen = false;
-    isInGlobalNav = false;
     isInMenuDrawer = false;
-    isInMenu = false;
-    hasFocus = false;
-    el;
-    /**
-     * 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 is() { return "nano-nav-item"; }
     static get encapsulation() { return "shadow"; }
@@ -323,6 +213,7 @@ export class NavItem {
         return {
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -333,16 +224,16 @@ export class NavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Href to link to"
+                    "text": "Href to link to. Alternatively, slot an `<a>` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "null"
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_self' | '_blank' | '_parent' | '_top'",
@@ -357,12 +248,12 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -377,12 +268,12 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -397,13 +288,13 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
-                "mutable": false,
+                "attribute": "selected",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -417,50 +308,32 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "secondaryActiveWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Screen pixel width to activate the secondary menu"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "secondary-active-width",
-                "reflect": false,
-                "defaultValue": "0"
-            },
-            "secondaryFallback": {
-                "type": "unknown",
+            "checkbox": {
+                "type": "boolean",
+                "attribute": "checkbox",
                 "mutable": false,
                 "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Secondary fallback function for when the secondary menu is no longer active."
+                    "text": "Changes behaviour so automatically becomes `selected` onClick"
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "() => {}"
+                "reflect": true,
+                "defaultValue": "false"
             },
             "closeOnBlur": {
                 "type": "boolean",
+                "attribute": "close-on-blur",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -475,12 +348,12 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-on-blur",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "notification": {
                 "type": "boolean",
+                "attribute": "notification",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -495,7 +368,6 @@ export class NavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notification",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -503,12 +375,8 @@ export class NavItem {
     }
     static get states() {
         return {
-            "hasAnchorEle": {},
             "didOpen": {},
-            "isInGlobalNav": {},
-            "isInMenuDrawer": {},
-            "isInMenu": {},
-            "hasFocus": {}
+            "isInMenuDrawer": {}
         };
     }
     static get events() {
@@ -596,36 +464,6 @@ export class NavItem {
                         }
                     }
                 }
-            }, {
-                "method": "nanoBlur",
-                "name": "nanoBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the nav item loses focus."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "nanoFocus",
-                "name": "nanoFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the nav item has focus."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
             }];
     }
     static get methods() {
@@ -649,7 +487,7 @@ export class NavItem {
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "open",
@@ -675,4 +513,3 @@ export class NavItem {
             }];
     }
 }
-//# sourceMappingURL=nav-item.js.map