@nanoporetech-digital/components 3.2.0 → 3.3.1

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

@@ -47,14 +47,12 @@
   color: var(--content-color);
   font-size: var(--font-size);
   text-decoration: none;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 :host *,
 :host *::before,
 :host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host(.hide) {
@@ -62,17 +60,13 @@
 }
 
 :host(.has-global-nav) .content-wrap {
-  -webkit-padding-before: var(--global-nav-height);
-          padding-block-start: var(--global-nav-height);
-  -webkit-margin-before: calc(var(--global-nav-height) * -1);
-          margin-block-start: calc(var(--global-nav-height) * -1);
+  padding-block-start: var(--global-nav-height);
+  margin-block-start: calc(var(--global-nav-height) * -1);
 }
 
 .container {
   inset-inline-end: auto;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
-          flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
+  flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
   background: var(--bg-color);
   color: var(--content-color);
   z-index: 1;
@@ -85,7 +79,6 @@
 }
 
 :host(:not(.loading)) .container {
-  -webkit-transition: inline-size 0.3s ease;
   transition: inline-size 0.3s ease;
 }
 
@@ -99,8 +92,6 @@
   position: sticky;
   font-size: var(--icon-size);
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-block-size: calc(100vh - 61px);
   min-block-size: calc(var(--vh, 1vh) * 100 - 61px);
@@ -109,18 +100,11 @@
 
 .content {
   inline-size: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   overflow: hidden;
   background: var(--bg-color);
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
 .content::after {
   content: "";
@@ -137,44 +121,29 @@
   border: none;
   color: inherit;
   font-size: var(--icon-size);
-  -webkit-margin-before: var(--padding-top);
-          margin-block-start: var(--padding-top);
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--padding-bottom);
-          margin-block-end: var(--padding-bottom);
-  -webkit-margin-start: calc(var(--padding-start) / 2);
-          margin-inline-start: calc(var(--padding-start) / 2);
+  margin-block-start: var(--padding-top);
+  margin-inline-end: 0;
+  margin-block-end: var(--padding-bottom);
+  margin-inline-start: calc(var(--padding-start) / 2);
   border-radius: 4px;
   padding-block: 6px;
   padding-inline: 5px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-line-pack: center;
-      align-content: center;
+  align-content: center;
   inline-size: 30px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .collapse-btn nano-icon {
   font-size: var(--icon-size);
-  -webkit-transition: 0.2s -webkit-transform ease-in-out;
-  transition: 0.2s -webkit-transform ease-in-out;
   transition: 0.2s transform ease-in-out;
-  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
-  -webkit-transform: translateZ(0) rotate(0deg);
-          transform: translateZ(0) rotate(0deg);
+  transform: translateZ(0) rotate(0deg);
 }
 :host(.open) .collapse-btn nano-icon {
-  -webkit-transform: translateZ(0) rotate(180deg);
-          transform: translateZ(0) rotate(180deg);
+  transform: translateZ(0) rotate(180deg);
 }
 
 .foot {
-  -webkit-margin-before: auto;
-          margin-block-start: auto;
+  margin-block-start: auto;
 }
 
 .measure-ele {

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

@@ -15,11 +15,15 @@
   display: block;
   color: var(--color) !important;
   margin: var(--margin);
+  outline: none !important;
+}
+:host .nav-item,
+:host .link {
+  outline: none !important;
 }
 :host ::slotted(*),
 :host * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 :host ::slotted(button),
 :host button {
@@ -52,38 +56,28 @@
   color: var(--color) !important;
   background-color: var(--bg-color);
   line-height: inherit;
+  outline: none !important;
 }
 :host ::slotted(nano-icon[slot=icon-start]) {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
 }
 :host ::slotted(nano-icon[slot=icon-end]) {
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
 }
 :host .link ::slotted(nano-icon[slot=icon-start]) {
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline-start: var(--padding-start);
+  padding-inline-end: 0;
 }
 :host .link ::slotted(nano-icon[slot=icon-end]) {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-inline-end: var(--padding-end);
+  padding-inline-start: 0;
 }
 :host .link,
 :host button,
 :host a {
-  -webkit-border-after: var(--border-bottom);
-          border-block-end: var(--border-bottom);
-  display: -webkit-box;
-  display: -ms-flexbox;
+  border-block-end: var(--border-bottom);
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 :host .secondary-menu {
   display: none;
@@ -95,17 +89,17 @@
 :host a:hover {
   text-decoration: inherit !important;
 }
-:host button:focus,
-:host a:focus {
+: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)));
-  outline: var(--focus-outline, none);
+  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),
-:host ::slotted(button:focus) {
+: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)));
-  outline: none;
+  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,
@@ -149,19 +143,10 @@
 :host(.nano-menu) a:visited,
 :host(.nano-menu) button,
 :host(.nano-menu) .link {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
   color: "currentColor";
   text-decoration: inherit;
   white-space: normal;
@@ -171,28 +156,15 @@
 }
 :host(.nano-global-nav-menu) .text,
 :host(.nano-menu) .text {
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  padding-inline-start: 0;
+  padding-inline-end: 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) {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-:host(.nano-global-nav-menu) ::slotted(a:focus),
-:host(.nano-global-nav-menu) ::slotted(button:focus),
-:host(.nano-menu) ::slotted(a:focus),
-:host(.nano-menu) ::slotted(button:focus) {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  flex: 1;
 }
 :host(.nano-global-nav-menu) .secondary-menu,
 :host(.nano-menu) .secondary-menu {
@@ -205,13 +177,9 @@
   width: 100%;
   z-index: 1;
   opacity: 0;
-  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
-  transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
   transition: opacity 0.2s ease, transform 0.3s ease;
-  transition: opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
   background-color: var(--secondary-bg-color, white);
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
+  transform: translateX(100%);
 }
 :host(.nano-global-nav-menu) .secondary-menu:focus,
 :host(.nano-menu) .secondary-menu:focus {
@@ -220,12 +188,8 @@
 :host(.nano-global-nav-menu) .secondary-menu.open,
 :host(.nano-menu) .secondary-menu.open {
   opacity: 1;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
-  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.2s ease;
-  transition: opacity 0.3s ease, -webkit-transform 0.2s ease;
+  transform: translateX(0);
   transition: opacity 0.3s ease, transform 0.2s ease;
-  transition: opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
 }
 
 :host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]) {
@@ -236,9 +200,7 @@
   padding-inline: 0 var(--padding-end);
   padding-block: 0;
   font-size: 10px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 10px;
-          flex: 0 0 10px;
+  flex: 0 0 10px;
   pointer-events: none;
 }
 :host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),
@@ -248,15 +210,17 @@
 
 :host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,
 :host(.nano-menu[dir=rtl]) .secondary-menu {
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
+  transform: translateX(-100%);
 }
 :host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,
 :host(.nano-menu[dir=rtl]) .secondary-menu.open {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+  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);
@@ -265,18 +229,12 @@
 :host(.nano-global-nav-bar) .link,
 :host(.nano-global-nav-bar) a,
 :host(.nano-global-nav-bar) button {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   cursor: pointer;
 }
 :host(.nano-global-nav-bar) .text {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 :host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]) {
   margin-inline: var(--padding-end) 0;
@@ -286,78 +244,61 @@
   margin-inline: 0 var(--padding-start);
   margin-block: 0;
 }
-
-:host(.nano-global-nav-bar.has-secondary) button {
+:host(.nano-global-nav-bar) ::slotted(a),
+:host(.nano-global-nav-bar) button {
   position: relative;
 }
-:host(.nano-global-nav-bar.has-secondary) button::before {
+:host(.nano-global-nav-bar) ::slotted(a)::before,
+:host(.nano-global-nav-bar) button::before {
   content: "";
   background-color: #0c5a71;
   height: 9px;
   inset-inline: 0 5px;
-  inset-block-end: -24px;
+  inset-block-end: -22px;
   position: absolute;
-  -webkit-transform: translateZ(0) scaleX(0);
-          transform: translateZ(0) scaleX(0);
-  -webkit-transform-origin: 0;
-          transform-origin: 0;
-  -webkit-transition: 0.2s ease transform;
+  transform: translateZ(0) scaleX(0);
+  transform-origin: 0;
   transition: 0.2s ease transform;
 }
-:host(.nano-global-nav-bar.has-secondary) .selected button::before,
-:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before {
-  -webkit-transform: translateZ(0) scaleX(1);
-          transform: translateZ(0) scaleX(1);
+:host(.nano-global-nav-bar) .selected button::before,
+:host(.nano-global-nav-bar) .secondary-open button::before {
+  transform: translateZ(0) scaleX(1);
 }
+
+:host(.nano-global-nav-bar.selected) ::slotted(a)::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;
-  -webkit-transition: -webkit-transform 0.3s ease;
-  transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
-  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-  -webkit-transform: translateY(-100%) translateZ(0);
-          transform: translateY(-100%) translateZ(0);
+  transform: translateY(-100%) translateZ(0);
   background-color: var(--secondary-bg-color, #196c82);
   color: var(--secondary-color);
   position: absolute;
-  -webkit-box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
+  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 {
-  -webkit-transform: translateY(12px) translateZ(0);
-          transform: translateY(12px) translateZ(0);
+  transform: translateY(12px) translateZ(0);
 }
 
 :host(.nano-menu-drawer) .link,
 :host(.nano-menu-drawer) a,
 :host(.nano-menu-drawer) button {
-  -webkit-padding-before: calc(var(--padding-top) / 2);
-          padding-block-start: calc(var(--padding-top) / 2);
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-after: calc(var(--padding-bottom) / 2);
-          padding-block-end: calc(var(--padding-bottom) / 2);
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding-block-start: calc(var(--padding-top) / 2);
+  padding-inline-end: 0;
+  padding-block-end: calc(var(--padding-bottom) / 2);
+  padding-inline-start: var(--padding-start);
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
   color: currentColor;
   text-decoration: inherit;
   white-space: normal;
@@ -367,14 +308,10 @@
   width: 100%;
 }
 :host(.nano-menu-drawer) .text {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-inline-end: var(--padding-end);
+  padding-inline-start: 0;
   text-align: start;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
+  flex: 0 1 auto;
   min-width: 130px;
   width: 130px;
 }
@@ -383,16 +320,12 @@
   padding-block: 0;
   font-size: var(--icon-size);
   width: var(--icon-size);
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 var(--icon-size);
-          flex: 0 0 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;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 20px;
-          flex: 0 0 20px;
+  flex: 0 0 20px;
   min-width: 20px;
 }
 :host(.nano-menu-drawer) .secondary-menu {
@@ -403,13 +336,9 @@
   height: 100vh;
   inset-inline: auto 0;
   inset-block: 0;
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+  transform: translateX(0);
   z-index: -1;
-  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
-  transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
   transition: transform 0.3s ease, opacity 0.2s ease;
-  transition: transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;
   overflow-y: auto;
   width: var(--secondary-width, 400px);
   max-width: 62vw;
@@ -421,8 +350,7 @@
   outline: none;
 }
 :host(.nano-menu-drawer) .secondary-menu.open {
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
+  transform: translateX(100%);
 }
 :host(.nano-menu-drawer) .notification {
   position: relative;
@@ -448,11 +376,9 @@
 }
 
 :host(.nano-menu-drawer[dir=rtl]) .secondary-menu {
-  -webkit-transform: translateX(0%);
-          transform: translateX(0%);
+  transform: translateX(0%);
 }
 :host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open {
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
+  transform: translateX(-100%);
   opacity: 1;
 }

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

@@ -4,11 +4,23 @@
 import { h, Host, } from '@stencil/core';
 import { getDirectChildren, getSiblings } from '../../utils/dom';
 import { displayTransition } from '../../utils/transitions';
+import { getTabbableElements } from '../../utils/tabbable';
 /**
  * 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)
+ *
+ * @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 - 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 secondary-wrapper - the div surrounding slotted secondary content
+ * @part secondary-mask - the div that is added when secondary content is shown
  */
 export class NavItem {
   constructor() {
@@ -111,9 +123,9 @@ export class NavItem {
         return;
       // if event is associated with this element don't close
       if (ev && ev.relatedTarget) {
-        if (ev.relatedTarget === this.el ||
-          ev.relatedTarget === this.btn ||
-          this.foundThisNavEle(ev.relatedTarget)) {
+        if (this.foundThisNavEle(ev.relatedTarget))
+          return;
+        if (ev.relatedTarget === this.el || ev.relatedTarget === this.btn) {
           this.secondaryDiv.focus({ preventScroll: true });
           return;
         }
@@ -174,6 +186,7 @@ export class NavItem {
       setTimeout(() => {
         if (!this.fromHover && !this.didBlur)
           this.btn.focus({ preventScroll: true });
+        this.el.tabIndex = null;
         this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
       }, 50);
     }
@@ -192,6 +205,9 @@ export class NavItem {
         }, { threshold: 1 });
         panelio.observe(this.secondaryDiv);
         this.secondaryDiv.focus({ preventScroll: true });
+        const focusableChild = getTabbableElements(this.secondaryDiv, true);
+        if (focusableChild[0])
+          focusableChild[0].focus();
         this.btn.addEventListener('focusout', this.blur);
         this.secondaryDiv.addEventListener('focusout', this.blur);
         window.addEventListener('blur', this.blur);
@@ -250,11 +266,11 @@ export class NavItem {
         'nav-item': true,
         'secondary-open': this.open,
         selected: this.selected,
-      } }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
+      }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
         notification: this.notification,
-      } }, h("slot", { name: "icon-start" }), h("span", { class: "text" }, h("slot", null)), h("slot", { name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
+      } }, h("slot", { name: "icon-start" }), h("span", { class: "text" }, h("slot", null)), h("slot", { name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
         notification: this.notification,
-      } }, h("slot", { name: "icon-start" }), h("span", { class: "text" }, h("slot", null)), h("slot", { name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { class: "link" }, h("slot", { name: "icon-start" }), h("slot", null), h("slot", { name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabindex: "-1" }, h("div", { class: "secondary-menu-content" }, h("slot", { name: "secondary" })), h("div", { class: "secondary-menu-mask", onClick: this.closeSecondary }))))));
+      } }, h("slot", { name: "icon-start" }), h("span", { class: "text" }, h("slot", null)), h("slot", { name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { class: "link" }, h("slot", { name: "icon-start" }), h("slot", null), h("slot", { name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabindex: "-1" }, h("div", { class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { name: "secondary" })), h("div", { class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
   }
   static get is() { return "nano-nav-item"; }
   static get encapsulation() { return "shadow"; }