@nanoporetech-digital/components 8.17.1 → 8.18.0

package/dist/nano-components/nano-dropdown_2.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as o,a as e}from"./index-BM3Om9WE.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-BgopY-vd.js";import{t as d,h as l}from"./renderer-DpNDfhNy.js";import{g as p}from"./dom-dlicJTEJ.js";import{g as c}from"./slot-BeXeAw-u.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.hasFocus||this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"584081bb33462feb595037c47abd68aa3db1105a",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3847f51ea7fb4b0a80fe527d98e2af79468ed4bb",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"213d89d4ce752d7fa07e0f145d939679d6cb82ab",onSlotchange:this.handleSlotContent})))}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}
+import{r as t,c as i,g as o,a as e}from"./index-BM3Om9WE.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-BgopY-vd.js";import{t as d,h as l}from"./renderer-DpNDfhNy.js";import{g as p}from"./dom-dlicJTEJ.js";import{g as c}from"./slot-Crs4khNK.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.hasFocus||this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"584081bb33462feb595037c47abd68aa3db1105a",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3847f51ea7fb4b0a80fe527d98e2af79468ed4bb",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"213d89d4ce752d7fa07e0f145d939679d6cb82ab",onSlotchange:this.handleSlotContent})))}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}

package/dist/nano-components/nano-icon.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{k as i,r as o,c as t,g as n,a as r}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DpNDfhNy.js";let s;const a=(i,o)=>(i||!o||l(o)||(i=o),h(i)&&(i=m(i)),h(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>h(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),h=i=>"string"==typeof i,m=i=>i.toLowerCase(),d=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let o=0;o<i.attributes.length;o++){const t=i.attributes[o].value;if(h(t)&&0===t.toLowerCase().indexOf("on"))return!1}for(let o=0;o<i.childNodes.length;o++)if(!d(i.childNodes[o]))return!1}return!0},p=new Map,f=new Map,u=class{constructor(i){o(this,i),this.nanoLoad=t(this,"nanoLoad",7),this.nanoError=t(this,"nanoError",7)}io;get el(){return n(this)}svgContent;isVisible=!1;isLoading=!0;color;role;setAriaLabel(){if(this.ariaLabel||this.el.ariaLabel)"presentation"===this.role&&(this.ariaLabel=void 0);else if(!this.role||"presentation"!==this.role){const i=a(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," "))}}ariaLabel;updateRole(){this.ariaLabel?this.role="img":this.ariaLabel||(this.role="presentation")}flipRtl;name;src;icon;size="auto";lazy=!0;loadIcon(){if(this.isVisible){const o=(o=>{let t=c(o.src);return t||(t=a(o.name,o.icon),t?(n=t,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(n)||(n.startsWith("device/")||n.startsWith("pictogram/")?i(`../nano-assets/icon/${n}.svg`):i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`))):o.icon&&(t=c(o.icon),t)?t:null);var n})(this);o&&(p.has(o)?(this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()}))):(i=>{let o=f.get(i);return o||(o=fetch(i).then((o=>{if(o.ok)return o.text().then((o=>{p.set(i,(i=>{if(i&&document){const o=document.createElement("div");o.innerHTML=i;for(let i=o.childNodes.length-1;i>=0;i--)"svg"!==o.childNodes[i].nodeName.toLowerCase()&&o.removeChild(o.childNodes[i]);const t=o.firstElementChild;if(t&&"svg"===t.nodeName.toLowerCase()){const i=t.getAttribute("class")||"";if(t.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),d(t))return o.innerHTML}}return""})(o))}));p.set(i,"")})),f.set(i,o)),o})(o).then((()=>{this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()})),this.setAriaLabel()}),(()=>{this.nanoError.emit()})))}}nanoLoad;nanoError;waitUntilVisible(i,o,t){if(this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const n=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(n.disconnect(),this.io=void 0,t())}),{rootMargin:o});n.observe(i)}else t()}isRtl(){if("rtl"===this.el.ownerDocument?.dir)return!0;if(this.el.closest('[dir="rtl"]'))return!0;const i=this.el.getRootNode().host;return!(!i||!i.closest('[dir="rtl"]'))}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.updateRole(),this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&this.name.match(/right|left/)&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl();return e(r,{key:"0bc1c17119f0e49b9798a1b61a4a768f6406129f",class:{loading:this.isLoading,"flip-rtl":!!i,"nano-icon":!0}},e("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["device","pictogram"]}static get watchers(){return{role:["setAriaLabel"],ariaLabel:["updateRole"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";export{u as nano_icon}
+import{k as i,r as o,c as t,g as n,a as r}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DpNDfhNy.js";let s;const a=(i,o)=>(i||!o||l(o)||(i=o),h(i)&&(i=m(i)),h(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>h(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),h=i=>"string"==typeof i,m=i=>i.toLowerCase(),d=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let o=0;o<i.attributes.length;o++){const t=i.attributes[o].value;if(h(t)&&0===t.toLowerCase().indexOf("on"))return!1}for(let o=0;o<i.childNodes.length;o++)if(!d(i.childNodes[o]))return!1}return!0},p=new Map,f=new Map,u=class{constructor(i){o(this,i),this.nanoLoad=t(this,"nanoLoad",7),this.nanoError=t(this,"nanoError",7)}io;get el(){return n(this)}svgContent;isVisible=!1;isLoading=!0;color;role;setAriaLabel(){if(this.ariaLabel||this.el.ariaLabel)"presentation"===this.role&&(this.ariaLabel=void 0);else if(!this.role||"presentation"!==this.role){const i=a(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/-/g," "))}}ariaLabel;updateRole(){this.ariaLabel?this.role="img":this.ariaLabel||(this.role="presentation")}flipRtl;name;src;icon;size="auto";lazy=!0;loadIcon(){if(this.isVisible){const o=(o=>{let t=c(o.src);return t||(t=a(o.name,o.icon),t?(n=t,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(n)||(n.startsWith("device/")||n.startsWith("pictogram/")||n.startsWith("flag/")?i(`../nano-assets/icon/${n}.svg`):i(`../nano-assets/fontawesome-pro/svgs/${n}.svg`))):o.icon&&(t=c(o.icon),t)?t:null);var n})(this);o&&(p.has(o)?(this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()}))):(i=>{let o=f.get(i);return o||(o=fetch(i).then((o=>{if(o.ok)return o.text().then((o=>{p.set(i,(i=>{if(i&&document){const o=document.createElement("div");o.innerHTML=i;for(let i=o.childNodes.length-1;i>=0;i--)"svg"!==o.childNodes[i].nodeName.toLowerCase()&&o.removeChild(o.childNodes[i]);const t=o.firstElementChild;if(t&&"svg"===t.nodeName.toLowerCase()){const i=t.getAttribute("class")||"";if(t.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),d(t))return o.innerHTML}}return""})(o))}));p.set(i,"")})),f.set(i,o)),o})(o).then((()=>{this.svgContent=p.get(o),requestAnimationFrame((()=>{this.isLoading=!1,this.nanoLoad.emit()})),this.setAriaLabel()}),(()=>{this.nanoError.emit()})))}}nanoLoad;nanoError;waitUntilVisible(i,o,t){if(this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const n=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(n.disconnect(),this.io=void 0,t())}),{rootMargin:o});n.observe(i)}else t()}isRtl(){if("rtl"===this.el.ownerDocument?.dir)return!0;if(this.el.closest('[dir="rtl"]'))return!0;const i=this.el.getRootNode().host;return!(!i||!i.closest('[dir="rtl"]'))}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.updateRole(),this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&this.name.match(/right|left/)&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.isRtl();return e(r,{key:"5c392d7707158df8b3c3d75f00824e597c3a87a9",class:{loading:this.isLoading,"flip-rtl":!!i,"nano-icon":!0}},e("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["device","pictogram","flag"]}static get watchers(){return{role:["setAriaLabel"],ariaLabel:["updateRole"],name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";export{u as nano_icon}

package/dist/nano-components/nano-in-page-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,g as e,a as r}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{H as i}from"./slot-BeXeAw-u.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],r=n(a,"ul",!0)[0];if(e&&r){const t=this.createDetails(e.textContent?.trim()||"",r);e.remove(),a.prepend(t)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const r=document.createElement("nano-details");return r.setAttribute("label",a),r.classList.add("nav-details"),r.appendChild(e),r}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],r=o(this.host);a.forEach((a=>{const r=a.getAttribute("href")?.substring(1);if(!r)return;const t=document.getElementById(r);t&&e.push(t)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((r=>{r.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const t=e.filter((a=>a.classList.contains("in-view")));if(t.length){t.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=t[0].getAttribute("id"),r=this.host.querySelector(`a[href="#${e}"]`);r?.classList.add("is-active")}}),{root:r===document.documentElement?null:r,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return t(r,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},t("nav",{key:"d5ecad4befef8a17ab87bc6fd8166548d3bbac02",part:"root","aria-label":"In-page navigation"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&t("div",{key:"b8af62ddcfb510d5db84b10fdae6c3abc140adff",class:"header"},t("slot",{key:"d54e126201453b1b4ddf0d788193eecd9fb3f32f",name:"back"}),t("slot",{key:"aabc23912eb3f55c38793596f347de8c1bb72fa0",name:"accessory"})),t("div",{key:"dcd9be9561af10b16731a80072ee851f16d1cacd",class:"desktop-nav"},t("slot",{key:"5af492dafc853a042d14fa752f327303c102be23",onSlotchange:()=>this.handleSlotChange})),t("nano-details",{key:"b04115b88b4f2fbcfad931f82de1fe70030400be",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper [part~=header],.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper nano-details.is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details.is-active [part~=header],.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details [part~=header],.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details [part~=header]:hover,.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}
+import{r as a,g as e,a as r}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{H as i}from"./slot-Crs4khNK.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],r=n(a,"ul",!0)[0];if(e&&r){const t=this.createDetails(e.textContent?.trim()||"",r);e.remove(),a.prepend(t)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const r=document.createElement("nano-details");return r.setAttribute("label",a),r.classList.add("nav-details"),r.appendChild(e),r}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],r=o(this.host);a.forEach((a=>{const r=a.getAttribute("href")?.substring(1);if(!r)return;const t=document.getElementById(r);t&&e.push(t)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((r=>{r.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const t=e.filter((a=>a.classList.contains("in-view")));if(t.length){t.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=t[0].getAttribute("id"),r=this.host.querySelector(`a[href="#${e}"]`);r?.classList.add("is-active")}}),{root:r===document.documentElement?null:r,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return t(r,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},t("nav",{key:"d5ecad4befef8a17ab87bc6fd8166548d3bbac02",part:"root","aria-label":"In-page navigation"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&t("div",{key:"b8af62ddcfb510d5db84b10fdae6c3abc140adff",class:"header"},t("slot",{key:"d54e126201453b1b4ddf0d788193eecd9fb3f32f",name:"back"}),t("slot",{key:"aabc23912eb3f55c38793596f347de8c1bb72fa0",name:"accessory"})),t("div",{key:"dcd9be9561af10b16731a80072ee851f16d1cacd",class:"desktop-nav"},t("slot",{key:"5af492dafc853a042d14fa752f327303c102be23",onSlotchange:()=>this.handleSlotChange})),t("nano-details",{key:"b04115b88b4f2fbcfad931f82de1fe70030400be",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper [part~=header],.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper nano-details.is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details.is-active [part~=header],.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details [part~=header],.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details [part~=header]:hover,.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}

package/dist/nano-components/nano-input-otp.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as n,h as o,F as s,a}from"./index-BM3Om9WE.js";import{H as e}from"./slot-BeXeAw-u.js";import"./dom-dlicJTEJ.js";const r=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoClear=i(this,"nanoClear",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+p++;slotCtrl=new e(this,"[default]");focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoClear;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}async clear(){this.value="",this.inputRefs.forEach(((t,i)=>{t.value=this.inputValues[i]||""})),this.nanoClear.emit()}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity(),this.valid&&this.nanoComplete.emit({valid:this.valid,value:this.value?.toString()})}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,o=this.getValidChars(i.join("")).join("");this.value=o,this.computeValidity(),this.emitNanoInput(t),o.length===n&&this.nanoComplete.emit({value:o,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let o=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();o=-1===i?this.length-1:i,this.inputRefs[o]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===o?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let o=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){o=t;break}t.forEach(((t,s)=>{const a=-1===o?s===n-1:o===s;t.tabIndex=a?0:-1,t.setAttribute("aria-hidden",i[s]&&""!==i[s]||a?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,o=this.isRTL(this.el),s=i.target;if(!(s.selectionStart!==s.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const s="ArrowLeft"===i.key;s&&o||!s&&!o?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:o,allowInvalid:s}=this,a=i.target,e=a.value,r=this.previousInputValues[t]||"";if(e.length-r.length>1){const t=this.getValidChars(e);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!s&&e.length>0&&!o.test(e[e.length-1])||s&&this.specialCharsPattern.test(e[e.length-1]))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===a.selectionStart&&a.selectionEnd===e.length||!this.inputValues[t])return this.inputValues[t]=e,a.value=e,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===e.length){let n=i.data;if(n||(n=e.split("").find(((t,i)=>t!==r[i]))||e[e.length-1]),!s&&!o.test(n))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const p=e[(a.selectionStart??e.length)-1]??e[0];if(!s&&!o.test(p))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=p,a.value=p,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const o=t.clipboardData?.getData("text");if(!o)return void this.emitNanoInput(t);const s=this.getValidChars(o);s.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=s.join(""),this.updateValue(t);const a=s.length<n?s.length:n-1;i[a]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:o}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,o)}computeValidity(){this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t)))}render(){const{disabled:t,hasFocus:i,inputId:n,inputRefs:e,inputValues:r,length:p,readonly:h,invalid:l,valid:c}=this,u=this.getInputmode(),d=this.getTabbableIndex(),v=this.getPattern();return o(a,{key:"69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b",class:{"has-focus":i,"input-otp-disabled":t,"input-otp-readonly":h,"nano-invalid":l,"nano-valid":c}},o("div",{key:"9fcd9882d552cde88adfa7578e556155651bbb4d",class:"input-otp-container"},o("div",{key:"3e2c1a83282c08c1ccef81c4f13a895f1efeec13",class:"input-otp-group",role:"group","aria-label":"One-time password input"},Array.from({length:p}).map(((i,a)=>o(s,null,o("div",{class:"native-wrapper"},o("input",{class:"native-input",id:`${n}-${a}`,"aria-label":`Input ${a+1} of ${p}`,type:"text",inputmode:u,pattern:v,disabled:t,readOnly:h,tabIndex:a===d?0:-1,value:r[a]||"",autocomplete:"one-time-code",ref:t=>e[a]=t,onInput:this.onInput(a),onBlur:this.onBlur,onFocus:this.onFocus(a),onKeyDown:this.onKeyDown(a),onPaste:this.onPaste})),this.showSeparator(a)&&o("div",{class:"input-otp-separator"}))))),this.showValidity&&o("div",{key:"b5d9d9f3023cca6fcf9d8a394287de2333eeff54",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":l},part:"validity-icon"},o("slot",{key:"d4a3123b713487f579a503ea1158e73b97a35198",name:"validity-icon"},o("nano-icon",{key:"2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),this.slotCtrl.has("[default]")&&o("div",{key:"32b6883425e8f62bda344ad6f92ff63a5fef98f4",class:"input-otp-description"},o("slot",{key:"81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f"})))}static get watchers(){return{value:["valueChanged"]}}};let p=0;r.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h .input-otp-description.sc-nano-input-otp,.input-otp-disabled.sc-nano-input-otp-h .input-otp-group.sc-nano-input-otp{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{r as nano_input_otp}
+import{r as t,c as i,g as n,h as o,F as s,a}from"./index-BM3Om9WE.js";import{H as e}from"./slot-Crs4khNK.js";const r=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoClear=i(this,"nanoClear",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+h++;slotCtrl=new e(this,"[default]");focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoClear;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}async clear(){this.value="",this.inputRefs.forEach(((t,i)=>{t.value=this.inputValues[i]||""})),this.nanoClear.emit()}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity(),this.valid&&this.nanoComplete.emit({valid:this.valid,value:this.value?.toString()})}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,o=this.getValidChars(i.join("")).join("");this.value=o,this.computeValidity(),this.emitNanoInput(t),o.length===n&&this.nanoComplete.emit({value:o,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let o=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();o=-1===i?this.length-1:i,this.inputRefs[o]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===o?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let o=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){o=t;break}t.forEach(((t,s)=>{const a=-1===o?s===n-1:o===s;t.tabIndex=a?0:-1,t.setAttribute("aria-hidden",i[s]&&""!==i[s]||a?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,o=this.isRTL(this.el),s=i.target;if(!(s.selectionStart!==s.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const s="ArrowLeft"===i.key;s&&o||!s&&!o?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:o,allowInvalid:s}=this,a=i.target,e=a.value,r=this.previousInputValues[t]||"";if(e.length-r.length>1){const t=this.getValidChars(e);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!s&&e.length>0&&!o.test(e[e.length-1])||s&&this.specialCharsPattern.test(e[e.length-1]))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===a.selectionStart&&a.selectionEnd===e.length||!this.inputValues[t])return this.inputValues[t]=e,a.value=e,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===e.length){let n=i.data;if(n||(n=e.split("").find(((t,i)=>t!==r[i]))||e[e.length-1]),!s&&!o.test(n))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const h=e[(a.selectionStart??e.length)-1]??e[0];if(!s&&!o.test(h))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=h,a.value=h,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const o=t.clipboardData?.getData("text");if(!o)return void this.emitNanoInput(t);const s=this.getValidChars(o);s.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=s.join(""),this.updateValue(t);const a=s.length<n?s.length:n-1;i[a]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:o}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,o)}computeValidity(){this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t)))}render(){const{disabled:t,hasFocus:i,inputId:n,inputRefs:e,inputValues:r,length:h,readonly:p,invalid:l,valid:c}=this,u=this.getInputmode(),d=this.getTabbableIndex(),v=this.getPattern();return o(a,{key:"69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b",class:{"has-focus":i,"input-otp-disabled":t,"input-otp-readonly":p,"nano-invalid":l,"nano-valid":c}},o("div",{key:"9fcd9882d552cde88adfa7578e556155651bbb4d",class:"input-otp-container"},o("div",{key:"3e2c1a83282c08c1ccef81c4f13a895f1efeec13",class:"input-otp-group",role:"group","aria-label":"One-time password input"},Array.from({length:h}).map(((i,a)=>o(s,null,o("div",{class:"native-wrapper"},o("input",{class:"native-input",id:`${n}-${a}`,"aria-label":`Input ${a+1} of ${h}`,type:"text",inputmode:u,pattern:v,disabled:t,readOnly:p,tabIndex:a===d?0:-1,value:r[a]||"",autocomplete:"one-time-code",ref:t=>e[a]=t,onInput:this.onInput(a),onBlur:this.onBlur,onFocus:this.onFocus(a),onKeyDown:this.onKeyDown(a),onPaste:this.onPaste})),this.showSeparator(a)&&o("div",{class:"input-otp-separator"}))))),this.showValidity&&o("div",{key:"b5d9d9f3023cca6fcf9d8a394287de2333eeff54",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":l},part:"validity-icon"},o("slot",{key:"d4a3123b713487f579a503ea1158e73b97a35198",name:"validity-icon"},o("nano-icon",{key:"2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),this.slotCtrl.has("[default]")&&o("div",{key:"32b6883425e8f62bda344ad6f92ff63a5fef98f4",class:"input-otp-description"},o("slot",{key:"81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f"})))}static get watchers(){return{value:["valueChanged"]}}};let h=0;r.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h .input-otp-description.sc-nano-input-otp,.input-otp-disabled.sc-nano-input-otp-h .input-otp-group.sc-nano-input-otp{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{r as nano_input_otp}

package/dist/nano-components/nano-menu-drawer.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as o,g as n,d as e,a as t}from"./index-BM3Om9WE.js";import{c as a}from"./dom-dlicJTEJ.js";import{t as i,h as s}from"./renderer-DpNDfhNy.js";import{H as r}from"./slot-BeXeAw-u.js";const l=class{constructor(n){o(this,n)}containerDiv;contentDiv;globalNav;children=[];ro;slotCtrl=new r(this,"foot");get el(){return n(this)}reset=!1;isLoading=!0;hide=!1;secondaryOpen=!1;open=!0;hideWidth=576;cancelNavItemEvents(o){o.detail.secondaryMenu&&(o.stopPropagation(),this.secondaryOpen="nanoOpen"===o.type)}openChange(){if(localStorage.setItem("nanoMenuDrawerOpen",this.open.toString()),this.containerDiv){const o=document.documentElement.clientWidth,n=Math.abs(window.innerWidth-o);if(this.open){const o=this.contentDiv.scrollWidth;e((()=>{this.containerDiv.style.width=o+"px",this.containerDiv.style.setProperty("--menu-width",o+"px"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}else e((()=>{this.containerDiv.style.width=null,this.containerDiv.style.removeProperty("--menu-width"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}}moveItemsToGlobalNav(){const o=this.el.querySelectorAll(i("nano-nav-item"));this.hide=!0,this.globalNav.triggerResize(),o.forEach((o=>{this.children.push({slot:o.getAttribute("slot"),element:o}),o.setAttribute("slot","menu"),o.classList.add("nano-global-nav-menu"),this.globalNav.appendChild(o)}))}moveItemsToDrawer(){this.children&&this.children.length&&(this.children.forEach((o=>{o.element.removeAttribute("slot"),o.element.classList.remove("nano-global-nav-menu"),o.slot&&o.slot.length&&o.element.setAttribute("slot",o.slot),this.el.appendChild(o.element)})),this.children=[],this.hide=!1)}onResize=()=>{if(!this.globalNav)return;const{width:o}=this.globalNav.getBoundingClientRect();o>this.hideWidth?this.moveItemsToDrawer():this.moveItemsToGlobalNav()};toggle=o=>{o.preventDefault(),this.open=!this.open};attachRO(){this.ro||(this.ro=new ResizeObserver((()=>{this.onResize()})),this.ro.observe(this.globalNav))}componentWillLoad(){this.globalNav=a(i("nano-global-nav"),this.el),this.globalNav||console.warn("nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.");{const o=localStorage.getItem("nanoMenuDrawerOpen");this.open=o?"true"===o:this.open,this.globalNav.componentOnReady().then((()=>{this.openChange()}))}}connectedCallback(){this.onResize()}componentDidLoad(){this.attachRO()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0}render(){return s(t,{key:"bed821db8e5a30f26c3c9bad45b01321bdf4ca77",class:{open:this.open,"secondary-open":this.secondaryOpen,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav,"nano-menu-drawer":!0},dir:"rtl"===this.el.ownerDocument.dir?"rtl":null},s("div",{key:"e80fe18a73873359fc1d86ca93a06b8c6d3173c1",ref:o=>this.containerDiv=o,class:"container"},s("div",{key:"fe83b1858bacd94f3e0540ee3933d1018f7bfb9d",class:"content-wrap "+(this.secondaryOpen?"secondary-open":"")},s("nav",{key:"bed3b6c253cf16f8a796393be71c2c1b9aebd266",ref:o=>this.contentDiv=o,class:"content"},s("div",{key:"a8ea363c51345c83fcbf8723a32627bd99c5a9cf",class:"head"},s("button",{key:"fa9765354704685582e64771ded73c30c88e0374",onClick:this.toggle,class:"collapse-btn"},s("nano-icon",{key:"0489c46c0c76a72720daf6656e26c2946433bccc",name:"light/arrow-right-to-line"}),s("span",{key:"81b00aaf09a528d6137351df20e23149a5325bf0",class:"visually-hidden"},"collapse / expand menu"))),s("slot",{key:"ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7"}),this.slotCtrl.has("foot")&&s("div",{key:"dbb8345173ee78b9685cc46c6dcde5c2d617a868",class:"foot"},s("slot",{key:"93bfeb1493a1d5e9a420803a09e64dced877591b",name:"foot"}))))))}static get watchers(){return{open:["openChange"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:"";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}';export{l as nano_menu_drawer}
+import{r as o,g as n,d as e,a as t}from"./index-BM3Om9WE.js";import{c as a}from"./dom-dlicJTEJ.js";import{t as i,h as s}from"./renderer-DpNDfhNy.js";import{H as r}from"./slot-Crs4khNK.js";const l=class{constructor(n){o(this,n)}containerDiv;contentDiv;globalNav;children=[];ro;slotCtrl=new r(this,"foot");get el(){return n(this)}reset=!1;isLoading=!0;hide=!1;secondaryOpen=!1;open=!0;hideWidth=576;cancelNavItemEvents(o){o.detail.secondaryMenu&&(o.stopPropagation(),this.secondaryOpen="nanoOpen"===o.type)}openChange(){if(localStorage.setItem("nanoMenuDrawerOpen",this.open.toString()),this.containerDiv){const o=document.documentElement.clientWidth,n=Math.abs(window.innerWidth-o);if(this.open){const o=this.contentDiv.scrollWidth;e((()=>{this.containerDiv.style.width=o+"px",this.containerDiv.style.setProperty("--menu-width",o+"px"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}else e((()=>{this.containerDiv.style.width=null,this.containerDiv.style.removeProperty("--menu-width"),this.containerDiv.style.setProperty("--scrollbar-width",n+"px")}))}}moveItemsToGlobalNav(){const o=this.el.querySelectorAll(i("nano-nav-item"));this.hide=!0,this.globalNav.triggerResize(),o.forEach((o=>{this.children.push({slot:o.getAttribute("slot"),element:o}),o.setAttribute("slot","menu"),o.classList.add("nano-global-nav-menu"),this.globalNav.appendChild(o)}))}moveItemsToDrawer(){this.children&&this.children.length&&(this.children.forEach((o=>{o.element.removeAttribute("slot"),o.element.classList.remove("nano-global-nav-menu"),o.slot&&o.slot.length&&o.element.setAttribute("slot",o.slot),this.el.appendChild(o.element)})),this.children=[],this.hide=!1)}onResize=()=>{if(!this.globalNav)return;const{width:o}=this.globalNav.getBoundingClientRect();o>this.hideWidth?this.moveItemsToDrawer():this.moveItemsToGlobalNav()};toggle=o=>{o.preventDefault(),this.open=!this.open};attachRO(){this.ro||(this.ro=new ResizeObserver((()=>{this.onResize()})),this.ro.observe(this.globalNav))}componentWillLoad(){this.globalNav=a(i("nano-global-nav"),this.el),this.globalNav||console.warn("nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.");{const o=localStorage.getItem("nanoMenuDrawerOpen");this.open=o?"true"===o:this.open,this.globalNav.componentOnReady().then((()=>{this.openChange()}))}}connectedCallback(){this.onResize()}componentDidLoad(){this.attachRO()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0}render(){return s(t,{key:"bed821db8e5a30f26c3c9bad45b01321bdf4ca77",class:{open:this.open,"secondary-open":this.secondaryOpen,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav,"nano-menu-drawer":!0},dir:"rtl"===this.el.ownerDocument.dir?"rtl":null},s("div",{key:"e80fe18a73873359fc1d86ca93a06b8c6d3173c1",ref:o=>this.containerDiv=o,class:"container"},s("div",{key:"fe83b1858bacd94f3e0540ee3933d1018f7bfb9d",class:"content-wrap "+(this.secondaryOpen?"secondary-open":"")},s("nav",{key:"bed3b6c253cf16f8a796393be71c2c1b9aebd266",ref:o=>this.contentDiv=o,class:"content"},s("div",{key:"a8ea363c51345c83fcbf8723a32627bd99c5a9cf",class:"head"},s("button",{key:"fa9765354704685582e64771ded73c30c88e0374",onClick:this.toggle,class:"collapse-btn"},s("nano-icon",{key:"0489c46c0c76a72720daf6656e26c2946433bccc",name:"light/arrow-right-to-line"}),s("span",{key:"81b00aaf09a528d6137351df20e23149a5325bf0",class:"visually-hidden"},"collapse / expand menu"))),s("slot",{key:"ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7"}),this.slotCtrl.has("foot")&&s("div",{key:"dbb8345173ee78b9685cc46c6dcde5c2d617a868",class:"foot"},s("slot",{key:"93bfeb1493a1d5e9a420803a09e64dced877591b",name:"foot"}))))))}static get watchers(){return{open:["openChange"]}}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:"";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}';export{l as nano_menu_drawer}

package/dist/nano-components/nano-nav-item.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as e,g as a,a as n}from"./index-BM3Om9WE.js";import{g as i}from"./dom-dlicJTEJ.js";import{g as s}from"./tabbable-BgopY-vd.js";import{t as o,h as r}from"./renderer-DpNDfhNy.js";import{H as c}from"./slot-BeXeAw-u.js";import{f as d}from"./active-element-CKJIkX0R.js";const h=(t,e)=>{const a={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...e};return new Promise((e=>{const n=i=>{i.target!==t&&!i.composedPath().some((t=>t===i.target))||a.transitionProp&&!a.transitionProp.includes(i.propertyName)||(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown"))},i=n=>{n.target!==t&&!n.composedPath().some((t=>t===n.target))||a.transitionProp&&!a.transitionProp.includes(n.propertyName)||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",i),e("hidden"))};a.show?(t.addEventListener("transitionend",n),t.style.display=a.showDisplay,setTimeout((()=>t[a.showProp].add(a.className)),50)):(t.addEventListener("transitionend",i),t[a.showProp].remove(a.className)),a.timeout&&setTimeout((()=>{a.show&&"true"!==t.dataset.displayTransition?(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown")):a.show||"false"===t.dataset.displayTransition||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",i),e("hidden"))}),a.timeout)}))},l=class{constructor(a){t(this,a),this.nanoClose=e(this,"nanoClose",7),this.nanoOpen=e(this,"nanoOpen",7),this.nanoOpening=e(this,"nanoOpening",7),this.nanoClosing=e(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new c(this,"secondary","close-button");controlElement;get host(){return a(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return d(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const t=new window.IntersectionObserver((e=>{e[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const e=s(this.secondaryDiv,!0);e[0]&&e[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(t){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(t.key&&"Escape"===t.key?this.closeSecondary():t.composedPath().some((t=>t===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const t=i(this.host,"a")[0];if(t){this.href=t.getAttribute("href");const e=document.createElement("span");t.childNodes.forEach((t=>{e.append(t)})),this.host.append(e),t.remove()}};async closeMenu(){this.closeSecondary()}async openMenu(){this.openSecondary()}connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(o("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(n,{key:"b6ce27588c1ca2ac2a42d0aada06d7f554a1174a",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"e8faa3568a13feb95ef131f0bd412577120fbf84",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"4a4da7478db63015d0dcd81ed053146f8eeac5f3",part:"trigger trigger--anchor",target:this.target,ref:t=>this.controlElement=t,href:this.href,class:{navitem__trigger:!0}},r("slot",{key:"1eafb7864368850ad2539c402eb1b00877f3d55e",name:"icon-start"}),r("span",{key:"8953312d4dad64ced970d2f1120c07b6c36070f1",class:"navitem__label",part:"label"},r("slot",{key:"390f468f8d1f5d4f0669cae53ef140e452b16b07",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"0694ce0708264ef1305e4b926a2f40f1875025a9",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:t=>this.controlElement=t,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0}},r("slot",{key:"c3cc4fcbb527f5f8ea2786243fe610d587e36190",name:"icon-start"}),r("span",{key:"385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171",class:"navitem__label",part:"label"},r("slot",{key:"4e7a75c8903081856c20206aa309c2a9855991da",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"668b95901ba0b914ccc193d4f3cc4433d908c014",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:t=>this.secondaryDiv=t,tabIndex:-1},r("div",{key:"70a4b002e989753c461c7dac4dd975200a92e3de",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"7b0daad80ae03a29789c9d2bef74d2473f2f1f39",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"858798062958ea0f4ee809cbf853bdb83dd4d184",name:"close-button"})),r("slot",{key:"41583a8cc59babbfb1a9a084a3de31c61a145fbc",name:"secondary"})),r("div",{key:"5c260dca9a8fdf7951349df64a037fc7415c3c4b",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};l.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";export{l as nano_nav_item}
+import{r as t,c as e,g as a,a as n}from"./index-BM3Om9WE.js";import{g as s}from"./dom-dlicJTEJ.js";import{g as i}from"./tabbable-BgopY-vd.js";import{t as o,h as r}from"./renderer-DpNDfhNy.js";import{H as c}from"./slot-Crs4khNK.js";import{f as d}from"./active-element-CKJIkX0R.js";const h=(t,e)=>{const a={className:"",show:!0,showDisplay:"block",showProp:"classList",timeout:1e3,...e};return new Promise((e=>{const n=s=>{s.target!==t&&!s.composedPath().some((t=>t===s.target))||a.transitionProp&&!a.transitionProp.includes(s.propertyName)||(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown"))},s=n=>{n.target!==t&&!n.composedPath().some((t=>t===n.target))||a.transitionProp&&!a.transitionProp.includes(n.propertyName)||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",s),e("hidden"))};a.show?(t.addEventListener("transitionend",n),t.style.display=a.showDisplay,setTimeout((()=>t[a.showProp].add(a.className)),50)):(t.addEventListener("transitionend",s),t[a.showProp].remove(a.className)),a.timeout&&setTimeout((()=>{a.show&&"true"!==t.dataset.displayTransition?(t.dataset.displayTransition="true",t.removeEventListener("transitionend",n),e("shown")):a.show||"false"===t.dataset.displayTransition||(t.style.display="none",t.dataset.displayTransition="false",t.removeEventListener("transitionend",s),e("hidden"))}),a.timeout)}))},l=class{constructor(a){t(this,a),this.nanoClose=e(this,"nanoClose",7),this.nanoOpen=e(this,"nanoOpen",7),this.nanoOpening=e(this,"nanoOpening",7),this.nanoClosing=e(this,"nanoClosing",7)}secondaryDiv;slotCtrl=new c(this,"secondary","close-button");controlElement;get host(){return a(this)}didOpen=!1;isInMenuDrawer=!1;href=null;target="_self";disabled=!1;open=!1;selected=!1;checkbox=!1;closeOnBlur=!0;nanoClose;nanoOpen;nanoOpening;nanoClosing;async setFocus(){this.controlElement&&this.controlElement.focus()}openChange(){this.slotCtrl.has("secondary")&&(this.open?this.openSecondary():this.closeSecondary())}didOpenChange(){if(!this.slotCtrl.has("secondary"))return;if(!this.didOpen)return d(this.host,this.controlElement)&&this.controlElement.focus({preventScroll:!0}),void this.nanoClose.emit({secondaryMenu:this.secondaryDiv});const t=new window.IntersectionObserver((e=>{e[0].boundingClientRect.top<0&&this.secondaryDiv.scrollIntoView({behavior:"smooth"}),t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv),this.secondaryDiv.focus({preventScroll:!0});const e=i(this.secondaryDiv,!0);e[0]&&e[0].focus({preventScroll:!0}),this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}handleClose(t){this.didOpen&&this.slotCtrl.has("secondary")&&this.closeOnBlur&&(t.key&&"Escape"===t.key?this.closeSecondary():t.composedPath().some((t=>t===this.secondaryDiv))||this.closeSecondary())}closeSecondary=async()=>{this.slotCtrl.has("secondary")&&this.open&&(this.open=!1,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!1}),this.nanoClosing.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!1)};openSecondary=async()=>{this.slotCtrl.has("secondary")&&!this.open&&(this.open=!0,await h(this.secondaryDiv,{className:"modal--open",showProp:"part",show:!0}),this.nanoOpening.emit({secondaryMenu:this.secondaryDiv}),this.didOpen=!0)};toggleSecondary=()=>{this.slotCtrl.has("secondary")&&(this.didOpen?this.closeSecondary():this.openSecondary())};handleClick=()=>{this.disabled||(this.slotCtrl.has("secondary")?this.toggleSecondary():this.checkbox&&(this.selected=!this.selected))};handleDefaultSlotChange=()=>{const t=s(this.host,"a")[0];if(t){this.href=t.getAttribute("href");const e=document.createElement("span");t.childNodes.forEach((t=>{e.append(t)})),this.host.append(e),t.remove()}};async closeMenu(){this.closeSecondary()}async openMenu(){this.openSecondary()}connectedCallback(){this.handleDefaultSlotChange(),this.isInMenuDrawer=!!this.host.closest(o("nano-menu-drawer"))}componentDidLoad(){this.openChange()}render(){return r(n,{key:"b6ce27588c1ca2ac2a42d0aada06d7f554a1174a",class:{"nano-menu-drawer":this.isInMenuDrawer,"nano-nav-item":!0,disabled:this.disabled},role:this.host.closest('[role="menu"]')?"menuitem":void 0,"aria-disabled":this.disabled?"true":void 0},r("div",{key:"e8faa3568a13feb95ef131f0bd412577120fbf84",class:{navitem:!0,"navitem--open":this.open,"navitem--active":this.selected},part:"trigger-wrapper"},this.href&&!this.disabled&&r("a",{key:"4a4da7478db63015d0dcd81ed053146f8eeac5f3",part:"trigger trigger--anchor",target:this.target,ref:t=>this.controlElement=t,href:this.href,class:{navitem__trigger:!0}},r("slot",{key:"1eafb7864368850ad2539c402eb1b00877f3d55e",name:"icon-start"}),r("span",{key:"8953312d4dad64ced970d2f1120c07b6c36070f1",class:"navitem__label",part:"label"},r("slot",{key:"390f468f8d1f5d4f0669cae53ef140e452b16b07",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4",name:"icon-end"})),(!this.href||this.disabled)&&r("button",{key:"0694ce0708264ef1305e4b926a2f40f1875025a9",role:this.checkbox?"checkbox":void 0,"aria-checked":this.checkbox?this.selected.toString():void 0,part:"trigger trigger--button",ref:t=>this.controlElement=t,onClick:this.handleClick,disabled:this.disabled,class:{navitem__trigger:!0}},r("slot",{key:"c3cc4fcbb527f5f8ea2786243fe610d587e36190",name:"icon-start"}),r("span",{key:"385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171",class:"navitem__label",part:"label"},r("slot",{key:"4e7a75c8903081856c20206aa309c2a9855991da",onSlotchange:this.handleDefaultSlotChange})),r("slot",{key:"668b95901ba0b914ccc193d4f3cc4433d908c014",name:"icon-end"})),this.slotCtrl.has("secondary")&&!this.disabled&&r("div",{key:"f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d",part:"modal",class:{navitem__modal:!0,"navitem__modal--open":this.didOpen},ref:t=>this.secondaryDiv=t,tabIndex:-1},r("div",{key:"70a4b002e989753c461c7dac4dd975200a92e3de",class:"navitem__modal-content",part:"modal-content "+(this.didOpen?"modal-content--open":"")},this.slotCtrl.has("close-button")&&r("div",{key:"7b0daad80ae03a29789c9d2bef74d2473f2f1f39",part:"close-button",onClick:this.closeSecondary},r("slot",{key:"858798062958ea0f4ee809cbf853bdb83dd4d184",name:"close-button"})),r("slot",{key:"41583a8cc59babbfb1a9a084a3de31c61a145fbc",name:"secondary"})),r("div",{key:"5c260dca9a8fdf7951349df64a037fc7415c3c4b",class:"navitem__modal-mask",onClick:this.closeSecondary,part:"modal-mask "+(this.didOpen?"modal-mask--open":"")}))))}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};l.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";export{l as nano_nav_item}

package/dist/nano-components/slot-Crs4khNK.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{g as t,j as s}from"./index-BM3Om9WE.js";function h(t){const s=t.getRootNode();return s.host?s.host.innerText:t.innerText}class i{host;slotNames=[];constructor(s,...h){this.slotNames=h;const i=s.componentWillLoad;s.componentWillLoad=()=>{this.host=t(s),i&&i.call(s)};const o=s.connectedCallback;s.connectedCallback=()=>{this.host=t(s),this.hostConnected(),o&&o.call(s)};const e=s.disconnectedCallback;s.disconnectedCallback=()=>{this.hostDisconnected(),this.host=void 0,e&&e.call(s)}}hasDefaultSlot(){if(!this.host)return!1;let t;return t=this.host.shadowRoot?[...this.host.childNodes]:!this.host.classList.contains("hydrated")&&this.host.__childNodes?[...this.host?.__childNodes??[]]:[...this.host.childNodes],t.some((t=>!(t.nodeType!==Node.TEXT_NODE||!t.textContent.trim())||t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}hasNamedSlot(t){return!!this.host&&!!this.host.querySelector(`[slot="${t}"]`)}has(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){(this.host.shadowRoot??this.host).addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host&&(this.host.shadowRoot??this.host).removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange=t=>{const h=t.target;(this.slotNames.includes("[default]")&&!h.name||h.name&&this.slotNames.includes(h.name))&&s(this.host)}}export{i as H,h as g}

package/dist/stencil.config.js

@@ -77,6 +77,10 @@ export const config = {
                     src: '../src/components/icon/pictogram',
                     dest: './nano-assets/icon/pictogram',
                 },
+                {
+                    src: '../src/components/icon/flag',
+                    dest: './nano-assets/icon/flag',
+                },
                 {
                     src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
                     dest: './nano-assets/fontawesome-pro/svgs/brands',
@@ -125,6 +129,10 @@ export const config = {
                     src: '../src/components/icon/pictogram',
                     dest: '../nano-assets/icon/pictogram',
                 },
+                {
+                    src: '../src/components/icon/flag',
+                    dest: '../nano-assets/icon/flag',
+                },
                 {
                     src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
                     dest: '../nano-assets/fontawesome-pro/svgs/brands',

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-11T12:25:01",
+  "timestamp": "2026-01-26T16:43:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3369,7 +3369,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/ZCT-PoHy/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/QrfEi4pt/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }

package/hydrate/index.js

@@ -3834,7 +3834,7 @@ class HasSlotController {
         let childNodes;
         if (this.host.shadowRoot) {
             // * Regular shadow DOM component *
-            childNodes = [...this.host.shadowRoot.childNodes];
+            childNodes = [...this.host.childNodes];
         }
         else if (!this.host.classList.contains('hydrated') &&
             this.host.__childNodes) {
@@ -3863,7 +3863,7 @@ class HasSlotController {
     hasNamedSlot(name) {
         if (!this.host)
             return false;
-        return getDirectChildren(this.host, `[slot="${name}"]`, true).length > 0;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'
@@ -15380,7 +15380,17 @@ class GlobalSearchResults {
         this.algoliaEle.query = meta.query;
     };
     handleNanoFilterChanged() {
-        this.el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        if (!this.algoliaEle.showResults ||
+            !this.algoliaResultsEle?.querySelector('.topbar'))
+            return;
+        const topBar = this.algoliaResultsEle.querySelector('.topbar');
+        if (topBar.scrollIntoViewIfNeeded) {
+            // @ts-expect-error - scrollIntoViewIfNeeded is not standard
+            topBar.scrollIntoViewIfNeeded();
+        }
+        else {
+            topBar.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
     }
     handleReorder(e) {
         if (e
@@ -15489,8 +15499,8 @@ class GlobalSearchResults {
                 objectIDs: [hit.dataset.hitId],
                 positions: [Number(hit.dataset.hitCount) + 1],
             });
+            this.closeSearch();
         }
-        this.closeSearch();
     };
     showFiltersClick = () => {
         this.filtersDiv.tabIndex = -1;
@@ -15580,12 +15590,12 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: '481c6ef8c60a3d9e552ac7e34d39e8b4c6d801d3', class: {
+        return (h(Host, { key: '63af990582466961e1cf02c9e67bd8cffa82e620', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '624265ab100bc1b1476bb9bca306d74d138efec4', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'ea81b7334b7d2edb65328f65c70db0f75b48820c', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
             // @ts-expect-error this bubbles from nano-algolia-filter
-            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '5512db296627ed14b7ad73a4831bd0d63a99a086', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '10cf57aac61c6b40cd3a285ddfd03b483b9d131d', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -15963,7 +15973,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: '5bd881ab628ff64917da008bc134f40a3eb1417a', slot: "output" }), h("slot", { key: '4a53c4a1315db75890c3128cf6c3471870759c47' }))));
+            </div>`), h("div", { key: '531d1aaf58fe5df465d93998f9448207d23de76a', slot: "output" }), h("slot", { key: '66231f02547592a1b03a87b3f3e237c527befc38' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
@@ -16646,13 +16656,13 @@ class Icon {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '0bc1c17119f0e49b9798a1b61a4a768f6406129f', class: {
+        return (h(Host, { key: '5c392d7707158df8b3c3d75f00824e597c3a87a9', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,
             } }, (h("div", { class: "icon-inner" }))));
     }
-    static get assetsDirs() { return ["device", "pictogram"]; }
+    static get assetsDirs() { return ["device", "pictogram", "flag"]; }
     static get watchers() { return {
         "role": ["setAriaLabel"],
         "ariaLabel": ["updateRole"],

package/hydrate/index.mjs

@@ -3832,7 +3832,7 @@ class HasSlotController {
         let childNodes;
         if (this.host.shadowRoot) {
             // * Regular shadow DOM component *
-            childNodes = [...this.host.shadowRoot.childNodes];
+            childNodes = [...this.host.childNodes];
         }
         else if (!this.host.classList.contains('hydrated') &&
             this.host.__childNodes) {
@@ -3861,7 +3861,7 @@ class HasSlotController {
     hasNamedSlot(name) {
         if (!this.host)
             return false;
-        return getDirectChildren(this.host, `[slot="${name}"]`, true).length > 0;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'
@@ -15378,7 +15378,17 @@ class GlobalSearchResults {
         this.algoliaEle.query = meta.query;
     };
     handleNanoFilterChanged() {
-        this.el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        if (!this.algoliaEle.showResults ||
+            !this.algoliaResultsEle?.querySelector('.topbar'))
+            return;
+        const topBar = this.algoliaResultsEle.querySelector('.topbar');
+        if (topBar.scrollIntoViewIfNeeded) {
+            // @ts-expect-error - scrollIntoViewIfNeeded is not standard
+            topBar.scrollIntoViewIfNeeded();
+        }
+        else {
+            topBar.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
     }
     handleReorder(e) {
         if (e
@@ -15487,8 +15497,8 @@ class GlobalSearchResults {
                 objectIDs: [hit.dataset.hitId],
                 positions: [Number(hit.dataset.hitCount) + 1],
             });
+            this.closeSearch();
         }
-        this.closeSearch();
     };
     showFiltersClick = () => {
         this.filtersDiv.tabIndex = -1;
@@ -15578,12 +15588,12 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: '481c6ef8c60a3d9e552ac7e34d39e8b4c6d801d3', class: {
+        return (h(Host, { key: '63af990582466961e1cf02c9e67bd8cffa82e620', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '624265ab100bc1b1476bb9bca306d74d138efec4', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'ea81b7334b7d2edb65328f65c70db0f75b48820c', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
             // @ts-expect-error this bubbles from nano-algolia-filter
-            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '5512db296627ed14b7ad73a4831bd0d63a99a086', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '10cf57aac61c6b40cd3a285ddfd03b483b9d131d', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -15961,7 +15971,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: '5bd881ab628ff64917da008bc134f40a3eb1417a', slot: "output" }), h("slot", { key: '4a53c4a1315db75890c3128cf6c3471870759c47' }))));
+            </div>`), h("div", { key: '531d1aaf58fe5df465d93998f9448207d23de76a', slot: "output" }), h("slot", { key: '66231f02547592a1b03a87b3f3e237c527befc38' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
@@ -16644,13 +16654,13 @@ class Icon {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '0bc1c17119f0e49b9798a1b61a4a768f6406129f', class: {
+        return (h(Host, { key: '5c392d7707158df8b3c3d75f00824e597c3a87a9', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,
             } }, (h("div", { class: "icon-inner" }))));
     }
-    static get assetsDirs() { return ["device", "pictogram"]; }
+    static get assetsDirs() { return ["device", "pictogram", "flag"]; }
     static get watchers() { return {
         "role": ["setAriaLabel"],
         "ariaLabel": ["updateRole"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.17.1",
+  "version": "8.18.0",
   "sideEffects": false,
   "description": "A collection of Oxford Nanopore corporate / digital webcomponents",
   "type": "module",
@@ -56,7 +56,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.17.1"
+    "@nanoporetech-digital/style": "8.18.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

package/dist/nano-components/slot-BeXeAw-u.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{g as t,j as s}from"./index-BM3Om9WE.js";import{g as h}from"./dom-dlicJTEJ.js";function i(t){const s=t.getRootNode();return s.host?s.host.innerText:t.innerText}class o{host;slotNames=[];constructor(s,...h){this.slotNames=h;const i=s.componentWillLoad;s.componentWillLoad=()=>{this.host=t(s),i&&i.call(s)};const o=s.connectedCallback;s.connectedCallback=()=>{this.host=t(s),this.hostConnected(),o&&o.call(s)};const e=s.disconnectedCallback;s.disconnectedCallback=()=>{this.hostDisconnected(),this.host=void 0,e&&e.call(s)}}hasDefaultSlot(){if(!this.host)return!1;let t;return t=this.host.shadowRoot?[...this.host.shadowRoot.childNodes]:!this.host.classList.contains("hydrated")&&this.host.__childNodes?[...this.host?.__childNodes??[]]:[...this.host.childNodes],t.some((t=>!(t.nodeType!==Node.TEXT_NODE||!t.textContent.trim())||t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}hasNamedSlot(t){return!!this.host&&h(this.host,`[slot="${t}"]`,!0).length>0}has(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){(this.host.shadowRoot??this.host).addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host&&(this.host.shadowRoot??this.host).removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange=t=>{const h=t.target;(this.slotNames.includes("[default]")&&!h.name||h.name&&this.slotNames.includes(h.name))&&s(this.host)}}export{o as H,i as g}