@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/components/nav-item.js

@@ -1,12 +1,13 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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 getTabbableElements } from './tabbable.js';
+import { t as transformTag, h } from './renderer.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 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;
 
 const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLElement {
@@ -268,9 +269,9 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         }
         this.isInGlobalNav = false;
         this.isInMenuDrawer = false;
-        this.globalNavEle = this.el.closest('nano-global-nav');
-        this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');
-        this.isInMenu = !!this.el.closest('nano-menu');
+        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');
@@ -284,7 +285,7 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         this.btn.removeEventListener('blur', this.handleHostBlur);
     }
     render() {
-        return (h(Host, { key: '0eb79d2a46a486734e160a8edec10c5a093c7abd', class: {
+        return (h(Host, { key: '5919fe6851a8132a0da2c592c6adf977113c3983', class: {
                 'has-secondary': this.hasSecondarySlot,
                 'secondary-open': this.open,
                 selected: this.selected,
@@ -293,15 +294,16 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
                 'nano-global-nav': this.isInGlobalNav,
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-menu': this.isInMenu,
-            }, 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: 'c0ffc411df072d6b77c70f2ccfaf514da5815d4e', class: {
+                '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: 'a1fc238af0db4cf94b0580148977c85c72f03dc2', part: "ctrl ctrl--anchor", 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", { key: '7ee0a4a54692664dd7b9d1f9e3d20215542929b3', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
                 notification: this.notification,
-            } }, h("slot", { key: 'ad389bf7d8b2d87a34b38279bc424ad328449535', name: "icon-start" }), h("span", { key: '30cf7490ffba9f5f8b405d39064782dd95ebf3ed', class: "text" }, h("slot", { key: 'f22ec808feb97fe8f5440098a19ffd6e2da410c6' })), h("slot", { key: '203a30b302f86cc60bcf7af98121e529855055c5', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: '7120168b5eb9998ac1c366bab06599feea55ff2b', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
+            } }, 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: {
                 notification: this.notification,
-            } }, h("slot", { key: '28ae44862a415646ae791f11138940bd8b6e0821', name: "icon-start" }), h("span", { key: '3408306940d7bce6981535384cd6d796c7b7b1e5', class: "text" }, h("slot", { key: 'b212e80d2851e5d70b0062d0532ab58c53ab851b' })), h("slot", { key: '46a2c5b43170561ec867b399dfa708d73d4e8f55', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: 'dc5d755ddad02332a6640fd2f9962c8d4e966b17', class: "link" }, h("slot", { key: 'aa2107c17ad7da11eacc24d1970e882870a93411', name: "icon-start" }), h("slot", { key: '37b90820bd80b8378baec066b9ee5f4cec40d03c' }), h("slot", { key: '32290ce9717eef4484ecc2e98be2fb5677ba7a2b', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: 'a1027743f1fc4ea6fe633af562f5a1491e3a8457', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '5077b6d0af68b1bd44b0a656462475868036f92d', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: 'be14db10c9ea0279fde3363672084d7d44c95915', name: "secondary" })), h("div", { key: '36cf6c406d33027b305914c3efc2da8749dc4c15', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
+            } }, 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" }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],

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

@@ -1 +1 @@
-{"file":"nav-item.js","mappings":"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","names":[],"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include mx.text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline: var(--padding-start) 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline: 0 var(--padding-end);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-block-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.3s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translate3d(100%, 0, 0);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translate3d(0, 0, 0);\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      block-size: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: transform 0.2s ease;\n    }\n  }\n\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a),\n  button {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n    padding-inline: var(--padding-start) 0;\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    text-align: start;\n    flex: 0 1 auto;\n    min-inline-size: 130px;\n    inline-size: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    inline-size: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-inline-size: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    block-size: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    inline-size: var(--secondary-width, 400px);\n    max-inline-size: 62vw;\n    opacity: 1;\n    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inline-size: 6px;\n      block-size: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (width >= 52em) {\n        inline-size: 7px;\n        block-size: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport { NavItemEventDetail } from './nav-item-interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n  private secondaryDiv: HTMLDivElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    if (this.open) this.openSecondary();\n    else this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelIO = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelIO.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelIO.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: false,\n    });\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: true,\n    });\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n  };\n\n  connectedCallback() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  componentDidLoad() {\n    this.openChange();\n  }\n\n  disconnectedCallback(): void {\n    this.btn.removeEventListener('click', this.toggleSecondary);\n    this.btn.removeEventListener('focus', this.handleFocus);\n    this.btn.removeEventListener('blur', this.handleHostBlur);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nav-item.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,ygTAAygT,CAAC;AAC7hT,0BAAe,UAAU;;MCwCZ,OAAO;;;;;;;;;;;;IACV,gBAAgB,GAAY,KAAK,CAAC;IAClC,GAAG,CAAwC;IAC3C,SAAS,CAAU;IACnB,SAAS,GAAY,KAAK,CAAC;IAC3B,QAAQ,CAAS;IACjB,QAAQ,CAAS;IACjB,YAAY,CAA4B;IACxC,YAAY,CAAiB;IAE5B,YAAY,GAAY,KAAK,CAAC;IAC9B,OAAO,GAAY,KAAK,CAAC;IACzB,aAAa,GAAY,KAAK,CAAC;IAC/B,cAAc,GAAY,KAAK,CAAC;IAChC,QAAQ,GAAY,KAAK,CAAC;IAC1B,QAAQ,GAAY,KAAK,CAAC;;;;;IAMV,IAAI,GAAW,IAAI,CAAC;;;;IAKrC,MAAM,GAA4C,OAAO,CAAC;;;;IAK1D,QAAQ,GAAY,KAAK,CAAC;;;;IAKM,IAAI,GAAY,KAAK,CAAC;;;;IAKrC,QAAQ,GAAY,KAAK,CAAC;;;;IAK3C,oBAAoB,GAAW,CAAC,CAAC;;;;IAKjC,iBAAiB,GAAG,SAAQ,CAAC;;;;IAK7B,WAAW,GAAY,IAAI,CAAC;;;;IAK5B,YAAY,GAAY,KAAK,CAAC;;;;IAK7B,SAAS,CAAoC;;;;IAK7C,QAAQ,CAAoC;;;;IAK5C,WAAW,CAAoC;;;;IAK/C,WAAW,CAAoC;;;;IAK/C,QAAQ,CAAsB;;;;IAK9B,SAAS,CAAsB;;;;;IAOxC,MAAM,QAAQ;QACZ,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO;QACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;KAClB;;;;IAMD,UAAU;QACR,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;;YAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;KAC5B;;;;IAMD,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEnC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;;;YAGjB,UAAU,CAAC;gBACT,IACE,CAAC,IAAI,CAAC,SAAS;qBACd,CAAC,QAAQ,CAAC,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC;oBAErE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC1C,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aAC3D,EAAE,EAAE,CAAC,CAAC;SACR;aAAM;;;YAGL,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,MAAM,OAAO,GAAG,IAAK,MAAc,CAAC,oBAAoB,CACtD,CAAC,IAAiC;oBAChC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,CAAC,EAAE;wBACtC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;4BAC/B,QAAQ,EAAE,QAAQ;yBACnB,CAAC,CAAC;qBACJ;oBACD,OAAO,CAAC,UAAU,EAAE,CAAC;iBACtB,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,CACjB,CAAC;gBACF,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;gBAEjD,MAAM,cAAc,GAAG,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;gBACpE,IAAI,cAAc,CAAC,CAAC,CAAC;oBAAE,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAEjD,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aAC1D;SACF;KACF;IAID,WAAW,CAAC,CAA6B;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QACzE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC;YAC1D,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAEO,cAAc,GAAG;QACvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QACpD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE;YACzC,SAAS,EAAE,MAAM;YACjB,IAAI,EAAE,KAAK;SACZ,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB,CAAC;IAEM,aAAa,GAAG;QACtB,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE;YACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QACnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE;YACzC,SAAS,EAAE,MAAM;YACjB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB,CAAC;IAEM,eAAe,GAAG;QACxB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QACnC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;;YACnC,IAAI,CAAC,aAAa,EAAE,CAAC;KAC3B,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;QAErB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;YACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,cAAc,GAAG;QACvB,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;;;QAI3B,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;;IAGM,eAAe,GAAG,CAAC,EAAc;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,SAAS,GAAI,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;KAClC,CAAC;;IAGM,gBAAgB,GAAG;QACzB,IACE,CAAC,IAAI,CAAC,IAAI;YACV,IAAI,CAAC,SAAS;YACd,CAAC,IAAI,CAAC,gBAAgB;aACrB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAErE,OAAO;;;QAIT,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,+BAA+B,CAAC,CAAC,MAAM;YAC9D,UAAU,GAAG,GAAG,CAAC;QAEnB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,YAAY,MAAM,IAAI,CAAC,aAAa,EAAE,EACtC,UAAU,CACX,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;IAGM,gBAAgB,GAAG;QACzB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;QAGtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,YAAY,MAAM,IAAI,CAAC,cAAc,EAAE,EACvC,GAAG,CACJ,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,eAAe,EAAE,CAAC;KACnD,CAAC;IAEF,iBAAiB;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,YAAY,CAAC;QAEvC,MAAM,IAAI,GAAG,iBAAiB,CAC5B,IAAI,CAAC,EAAE,EACP,WAAW,CACZ,CAAC,CAAC,CAAC,CAAC;QACL,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC;QAE3B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,IAAI,GAAI,IAA0B,CAAC,IAAI;kBACvC,IAA0B,CAAC,IAAI;kBAChC,IAAI,CAAC;YACT,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,IAAI,IAAI,CAAC,gBAAgB;gBACvB,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAE3D,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACrD,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SACxD;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,aAAa;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,KAAK,IAAI,CAAC,YAAY;gBAC3C,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACpC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,oBAAoB;QAClB,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxD,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,gBAAgB;gBACtC,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,WAAW,EAAE,IAAI,CAAC,QAAQ;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,aAAa;gBACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;gBACvC,WAAW,EAAE,IAAI,CAAC,QAAQ;gBAC1B,eAAe,EAAE,IAAI;aACtB,EACD,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,EACvD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,GAAG,SAAS,IAE/D,4DACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,IAAI,EAAC,cAAc,IAElB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,KAChD,0DACE,IAAI,EAAC,mBAAmB,EACxB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,IAED,6DAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,6DAAM,KAAK,EAAC,MAAM,IAChB,8DAAQ,CACH,EACP,6DAAM,IAAI,EAAC,UAAU,GAAG,CACtB,CACL,EACA,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,MACnD,+DACE,IAAI,EAAC,mBAAmB,EACxB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,IAED,6DAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,6DAAM,KAAK,EAAC,MAAM,IAChB,8DAAQ,CACH,EACP,6DAAM,IAAI,EAAC,UAAU,GAAG,CACjB,CACV,EACA,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,KAClC,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,8DAAQ,EACR,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP,EACA,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,QAAQ,KACtC,4DACE,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,EACvC,QAAQ,EAAE,CAAC,CAAC,IAEZ,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,mBAAmB,IAC1D,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,EACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,IAAI,EAAC,gBAAgB,GAChB,CACH,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include mx.text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(.nano-icon[slot='icon-start']) {\n      padding-inline: var(--padding-start) 0;\n    }\n\n    ::slotted(.nano-icon[slot='icon-end']) {\n      padding-inline: 0 var(--padding-end);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{form.$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-block-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.3s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translate3d(100%, 0, 0);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translate3d(0, 0, 0);\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(.nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      block-size: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: transform 0.2s ease;\n    }\n  }\n\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a),\n  button {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 15%);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n    padding-inline: var(--padding-start) 0;\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    inline-size: 100%;\n  }\n\n  .text {\n    padding-inline: 0 var(--padding-end);\n    text-align: start;\n    flex: 0 1 auto;\n    min-inline-size: 130px;\n    inline-size: 130px;\n  }\n\n  ::slotted(.nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    inline-size: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(.nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-inline-size: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    block-size: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    inline-size: var(--secondary-width, 400px);\n    max-inline-size: 62vw;\n    opacity: 1;\n    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inline-size: 6px;\n      block-size: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (width >= 52em) {\n        inline-size: 7px;\n        block-size: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport { h, transformTag } from '../../utils/renderer';\nimport { NavItemEventDetail } from './nav-item-interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n  private secondaryDiv: HTMLDivElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    if (this.open) this.openSecondary();\n    else this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelIO = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelIO.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelIO.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: false,\n    });\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, {\n      className: 'open',\n      show: true,\n    });\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n  };\n\n  connectedCallback() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));\n\n    this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));\n    this.isInMenu = !!this.el.closest(transformTag('nano-menu'));\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  componentDidLoad() {\n    this.openChange();\n  }\n\n  disconnectedCallback(): void {\n    this.btn.removeEventListener('click', this.toggleSecondary);\n    this.btn.removeEventListener('focus', this.handleFocus);\n    this.btn.removeEventListener('blur', this.handleHostBlur);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          'nano-nav-item': true,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabIndex={-1}\n            >\n              <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/option.js

@@ -1,12 +1,13 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 import { g as getDirectChildren } from './dom.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const optionCss = ":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{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
+const optionCss = ":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{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 const NanoOptionStyle0 = optionCss;
 
 let optIds = 0;
@@ -78,12 +79,12 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '81da275412fb18c7e96d947c6e4612d8b4a4bfb1', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '65ec11bca28136d886a1ee24c93b0d14b2d3b296', onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc', part: "check-icon", class: "option__check" }, h("slot", { key: 'd33caab711a7b07a6d833c5f4fcca8aa1381bcd0', name: "check-icon" }, h("nano-icon", { key: '65255f90b5df1858af89529b6d2df7b5a9264112', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '952469135adf3b50d7a9c647edd861aee0b08c9b', part: "start", class: "option__start" }, h("slot", { key: 'e3b2ab153d5b45de84381e1804d93de64a0bbded', name: "start" })), h("div", { key: '178a8920687128fb0fa78bf5ce7f3f551cced273', part: "label", class: "option__label" }, h("slot", { key: '707a98e2da2413cd77bae52ccebb0004974ecb5e' }, this.label || this.value)), h("div", { key: '66a69defe2beb8f3bd8f68ab94019520fbd9ab21', part: "end", class: "option__end" }, h("slot", { key: '126ebcccc9ed46d2aea3aa6d37672570a8cae5a2', name: "end" })))));
+            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],

package/dist/components/option.js.map

@@ -1 +1 @@
-{"file":"option.js","mappings":"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","names":[],"sources":["src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-bottom: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-start: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-end: Defaults to #{tokens.$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{tokens.$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{tokens.$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get(tokens.$colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{tokens.$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{tokens.nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{tokens.$input-text-color});\n  --color-selected: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{tokens.nano-color(primary, contrast)});\n  --color-disabled: #{map.get(tokens.$colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  inline-size: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if ((!this.value || !this.value.length) && !this.label)\n      this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"option.js","mappings":"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","names":[],"sources":["src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-bottom: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-start: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-end: Defaults to #{tokens.$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{tokens.$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{tokens.$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get(tokens.$colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{tokens.$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{tokens.nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{tokens.$input-text-color});\n  --color-selected: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{tokens.nano-color(primary, contrast)});\n  --color-disabled: #{map.get(tokens.$colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  inline-size: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(.nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(.nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if ((!this.value || !this.value.length) && !this.label)\n      this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class=\"nano-option\"\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/progress-bar.js

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 
 const progressBarCss = ":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 const NanoProgressBarStyle0 = progressBarCss;
@@ -20,12 +21,14 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (h("div", { key: '40563d8a84636d568b0675808bd96cc84c0c4b97', part: "base", class: {
+        return (h(Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '32f65f980f9ef0a118ef005ff4ad68c8116b544b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, h("span", { key: '30a5b0e7663a5772c23ff75fc0b4b6bcd59f72ef', part: "label", class: "progress-bar__label" }, h("slot", { key: '1a80db1cb1f65e85f7ba78373e9f2aa7642a542e' }, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+            } }, h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            ? `${this.value}%`
+            : ''))))));
     }
     static get style() { return NanoProgressBarStyle0; }
 }, [1, "nano-progress-bar", {

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,gqCAAgqC,CAAC;AACxrC,8BAAe,cAAc;;MCgBhB,WAAW;;;;;;;;IAId,KAAK,GAAG,CAAC,CAAC;;IAGV,aAAa,GAAG,KAAK,CAAC;;IAGtB,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;aAC1D,IAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  block-size: var(--height);\n  border-radius: tokens.$layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  block-size: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"progress-bar.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gqCAAgqC,CAAC;AACxrC,8BAAe,cAAc;;MCiBhB,WAAW;;;;;;;;IAId,KAAK,GAAG,CAAC,CAAC;;IAGV,aAAa,GAAG,KAAK,CAAC;;IAGtB,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,IAC7B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;aAC1D,IAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW;cACpC,GAAG,IAAI,CAAC,KAAK,GAAG;cAChB,EAAE,CACD,CACF,CACH,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  block-size: var(--height);\n  border-radius: tokens.$layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  block-size: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class=\"nano-progress-bar\">\n        <div\n          part=\"base\"\n          class={{\n            'progress-bar': true,\n            'progress-bar--indeterminate': this.indeterminate,\n          }}\n          role=\"progressbar\"\n          title={this.host.title || undefined}\n          aria-label=\"Progress\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={this.indeterminate ? null : this.value}\n        >\n          <div\n            part=\"indicator\"\n            class=\"progress-bar__indicator\"\n            style={{\n              width: !this.indeterminate ? `${this.value}%` : undefined,\n            }}\n          >\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot>\n                {!this.indeterminate && this.showPercent\n                  ? `${this.value}%`\n                  : ''}\n              </slot>\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/renderer.js

@@ -0,0 +1,58 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h as h$1 } from '@stencil/core/internal/client';
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/**
+ * Transforms a tag name by adding a prefix if it's a custom element
+ * @param tag
+ * @returns the transformed tag
+ */
+function transformTag(tag) {
+    if (!tagPrefix)
+        return tag;
+    const isMyCustomElement = tag.startsWith('nano-');
+    return isMyCustomElement ? `${tagPrefix}-${tag}` : tag;
+}
+/**
+ * Augment Stencil's `h()` function to add a tag prefix
+ * @param args incoming JSX arguments
+ * @returns the result of the original `h()` function
+ */
+function h(...args) {
+    const tagName = args[0];
+    if (!tagName || typeof tagName !== 'string' || !tagPrefix) {
+        return h$1(...args);
+    }
+    let newTagName = tagName;
+    if (typeof tagName === 'string') {
+        newTagName = transformTag(tagName);
+    }
+    const arr = args.slice(2);
+    const tuple = [newTagName, args[1], arr];
+    return h$1(...tuple);
+}
+let tagPrefix = '';
+/**
+ * Sets the tag prefix to be used when rendering custom elements
+ * @param prefix the prefix to use
+ * @returns the `transformTag` function
+ */
+function setTagPrefix(prefix) {
+    tagPrefix = prefix;
+    return transformTag;
+}
+/**
+ * Gets the current tag prefix
+ * @returns the current tag prefix
+ */
+function getTagPrefix() {
+    return tagPrefix;
+}
+(function (h) {
+})(h || (h = {}));
+
+export { getTagPrefix as g, h, setTagPrefix as s, transformTag as t };
+
+//# sourceMappingURL=renderer.js.map

package/dist/components/renderer.js.map

@@ -0,0 +1 @@
+{"file":"renderer.js","mappings":";;;;;AAAA;AAGA;;;;;SAKgB,YAAY,CAAC,GAAW;IACtC,IAAI,CAAC,SAAS;QAAE,OAAO,GAAG,CAAC;IAC3B,MAAM,iBAAiB,GAAG,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAClD,OAAO,iBAAiB,GAAG,GAAG,SAAS,IAAI,GAAG,EAAE,GAAG,GAAG,CAAC;AACzD,CAAC;AAED;;;;;SAKgB,CAAC,CACf,GAAG,IAAiC;IAEpC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,SAAS,EAAE;QACzD,OAAOA,GAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;KAC1B;IAED,IAAI,UAAU,GAAG,OAAO,CAAC;IACzB,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAC/B,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;KACpC;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAU,CAAC;IAElD,OAAOA,GAAQ,CAAC,GAAG,KAAK,CAAC,CAAC;AAC5B,CAAC;AAED,IAAI,SAAS,GAAW,EAAE,CAAC;AAE3B;;;;;SAKgB,YAAY,CAAC,MAAc;IACzC,SAAS,GAAG,MAAM,CAAC;IACnB,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;SAIgB,YAAY;IAC1B,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,WAAiB,CAAC;AAElB,CAAC,EAFgB,CAAC,KAAD,CAAC;;;;","names":["stencilH"],"sources":["src/utils/renderer.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-namespace */\nimport { h as stencilH } from '@stencil/core/internal';\n\n/**\n * Transforms a tag name by adding a prefix if it's a custom element\n * @param tag\n * @returns the transformed tag\n */\nexport function transformTag(tag: string): string {\n  if (!tagPrefix) return tag;\n  const isMyCustomElement = tag.startsWith('nano-');\n  return isMyCustomElement ? `${tagPrefix}-${tag}` : tag;\n}\n\n/**\n * Augment Stencil's `h()` function to add a tag prefix\n * @param args incoming JSX arguments\n * @returns the result of the original `h()` function\n */\nexport function h(\n  ...args: Parameters<typeof stencilH>\n): ReturnType<typeof stencilH> {\n  const tagName = args[0];\n  if (!tagName || typeof tagName !== 'string' || !tagPrefix) {\n    return stencilH(...args);\n  }\n\n  let newTagName = tagName;\n  if (typeof tagName === 'string') {\n    newTagName = transformTag(tagName);\n  }\n\n  const arr = args.slice(2);\n  const tuple = [newTagName, args[1], arr] as const;\n\n  return stencilH(...tuple);\n}\n\nlet tagPrefix: string = '';\n\n/**\n * Sets the tag prefix to be used when rendering custom elements\n * @param prefix the prefix to use\n * @returns the `transformTag` function\n */\nexport function setTagPrefix(prefix: string) {\n  tagPrefix = prefix;\n  return transformTag;\n}\n\n/**\n * Gets the current tag prefix\n * @returns the current tag prefix\n */\nexport function getTagPrefix() {\n  return tagPrefix;\n}\n\nexport namespace h {\n  export import JSX = stencilH.JSX;\n}\n"],"version":3}

package/dist/components/resize-observe.js

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, readTask, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 
 const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class ResizeObserve extends HTMLElement {
     constructor() {
@@ -227,7 +228,7 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class ResizeObserve exten
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: '09a3b9f8a724f07ba84eec73378725dec973773a' }, h("slot", { key: '2f990e9c1ee91e1392a370d07ff988cb3abc3e42' }), !!this.notifyContentFit &&
+        return (h(Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),