@nanoporetech-digital/components 8.7.0 → 8.7.2

package/dist/nano-components/nano-tab-group.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as o,j as s,a as r}from"./index-BM3Om9WE.js";import{g as a}from"./dom-dlicJTEJ.js";import{C as n}from"./component-store-JYVuxwvK.js";import{t as e,h}from"./renderer-BaP2L8CT.js";import"./throttle-C93FMm2Z.js";let l=0;const d=class{constructor(o){t(this,o),this.nanoTabShow=i(this,"nanoTabShow",7),this.nanoTabHide=i(this,"nanoTabHide",7),this.nanoTabWillClose=i(this,"nanoTabWillClose",7),this.nanoTabClose=i(this,"nanoTabClose",7)}baseId="nano-tab-group-"+ ++l;activeTab;activePanel;isRtl;initialTouchX=null;initialTouchY=null;init=!0;_tab;get tab(){return this._tab}set tab(t){if(this.activeTab&&this.activeTab.panel===this._tab)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&(!this.init&&this.storeId&&n.update(this.storeId),this._tab=t,this.setActiveTab(i))}get host(){return o(this)}placement="top";noScrollControls=!1;equalTabSize=!1;size;storeId;storeMethod="url-hash";disableSwipe;nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&this.setActiveTab(i)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return a(this.host,e("nano-tab"))}get getAllPanels(){return a(this.host,e("nano-tab-content"))}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,i=!0){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllActiveTabs.map((t=>t.active=t===this.activeTab)),this.getAllPanels.map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),i&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllPanels;this.getAllActiveTabs.map(((i,o)=>{const s=t.find((t=>t.name===i.panel));s&&(s.id||(s.id=`${this.baseId}-panel-${o}`),i.id||(i.id=`${this.baseId}-tab-${o}`),i.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",i.id))}))}handleTabClose(t){let i=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(i<0)return;const r=this.getAllPanels.find((t=>t.name===o.panel));if(r&&(t.stopImmediatePropagation(),!this.nanoTabWillClose.emit({name:o.panel}).defaultPrevented)){if(o.active){i=0===i?1:i-1;const t=this.getAllActiveTabs[i]?.panel;t&&this.host.show(t)}o.remove(),r.remove(),this.nanoTabClose.emit({name:o.panel}),s(this.host)}}handleClick=t=>{const i=t.target.closest(e("nano-tab"));i&&this.setActiveTab(i)};handleKeyDown=t=>{const i=document.activeElement;if(!i||i.tagName.toLowerCase()!==e("nano-tab"))return;if(["Enter"," "].includes(t.key)){const i=t.target.closest(e("nano-tab"));i&&(this.setActiveTab(i),t.preventDefault(),t.stopPropagation())}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let s=o.indexOf(i);"Home"===t.key&&(s=0),"End"===t.key&&(s=o.length-1),"top"===this.placement&&((this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key)&&(s=Math.max(0,s-1)),(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(s=Math.min(o.length-1,s+1))),"start"===this.placement&&("ArrowUp"===t.key&&(s=Math.max(0,s-1)),"ArrowDown"===t.key&&(s=Math.min(o.length-1,s+1))),o[s].setFocus(),t.stopPropagation(),t.preventDefault()};handleTouchStart=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0];this.initialTouchX=i.pageX,this.initialTouchY=i.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0],o=i.pageX-this.initialTouchX,s=this.initialTouchX-i.clientX,r=this.initialTouchY-i.clientY,a=Math.abs(o)>=70&&Math.abs(r)<=50,n=this.getAllActiveTabs,e=n.findIndex((t=>t.active));if(a){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;n[e+t]&&(this.setActiveTab(n[e+t]),Math.abs(s)>Math.abs(r)&&this.activePanel.setAttribute("animation-dir",s>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}))};handleTabSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}),500)};componentWillLoad(){this.init=!0}componentDidLoad(){new IntersectionObserver(((t,i)=>{if(t[0].intersectionRatio>0){if(this.setAriaLabels(),this.storeId){n.init(this,["tab"],this.storeMethod,this.storeId);const t=n.get(this.storeId),i=t.retrieve()?.tab;i&&i!==t.initialState?.tab&&this.getAllActiveTabs.forEach((t=>{t.active=t.panel===i}))}this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1),i.unobserve(t[0].target),this.init=!1}})).observe(this.host)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){if(this.isRtl="rtl"===this.host.ownerDocument.dir,0!==this.getAllTabs.length)return h(r,{dir:this.isRtl?"rtl":null,class:"nano-tab-group"},h("div",{part:"base",class:{group:!0,"group--top":"top"===this.placement,"group--start":"start"===this.placement},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("nano-masked-overflow",{role:"navigation",class:"group__tabs",part:"tabs__wrapper",exportparts:"items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator",orientation:"top"===this.placement?"horizontal":"vertical",isActiveHandler:t=>this.activeTab===t,scrollControls:!this.noScrollControls,hideScrollbars:!0},h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}),h("div",{class:"group__tabs-border"})),h("div",{part:"body",class:"group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))}};d.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{--border:2px solid var(--nano-color-neutral-300);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-track-color:var(--nano-color-neutral-300);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";export{d as nano_tab_group}
+import{r as t,c as i,g as o,j as s,a as r}from"./index-BM3Om9WE.js";import{g as a}from"./dom-dlicJTEJ.js";import{C as n}from"./component-store-JYVuxwvK.js";import{t as e,h}from"./renderer-DasB4P10.js";import"./throttle-C93FMm2Z.js";let l=0;const d=class{constructor(o){t(this,o),this.nanoTabShow=i(this,"nanoTabShow",7),this.nanoTabHide=i(this,"nanoTabHide",7),this.nanoTabWillClose=i(this,"nanoTabWillClose",7),this.nanoTabClose=i(this,"nanoTabClose",7)}baseId="nano-tab-group-"+ ++l;activeTab;activePanel;isRtl;initialTouchX=null;initialTouchY=null;init=!0;_tab;get tab(){return this._tab}set tab(t){if(this.activeTab&&this.activeTab.panel===this._tab)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&(!this.init&&this.storeId&&n.update(this.storeId),this._tab=t,this.setActiveTab(i))}get host(){return o(this)}placement="top";noScrollControls=!1;equalTabSize=!1;size;storeId;storeMethod="url-hash";disableSwipe;nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const i=this.getAllActiveTabs.find((i=>i.panel===t));i&&this.setActiveTab(i)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return a(this.host,e("nano-tab"))}get getAllPanels(){return a(this.host,e("nano-tab-content"))}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,i=!0){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllActiveTabs.map((t=>t.active=t===this.activeTab)),this.getAllPanels.map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),i&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllPanels;this.getAllActiveTabs.map(((i,o)=>{const s=t.find((t=>t.name===i.panel));s&&(s.id||(s.id=`${this.baseId}-panel-${o}`),i.id||(i.id=`${this.baseId}-tab-${o}`),i.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",i.id))}))}handleTabClose(t){let i=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(i<0)return;const r=this.getAllPanels.find((t=>t.name===o.panel));if(r&&(t.stopImmediatePropagation(),!this.nanoTabWillClose.emit({name:o.panel}).defaultPrevented)){if(o.active){i=0===i?1:i-1;const t=this.getAllActiveTabs[i]?.panel;t&&this.host.show(t)}o.remove(),r.remove(),this.nanoTabClose.emit({name:o.panel}),s(this.host)}}handleClick=t=>{const i=t.target.closest(e("nano-tab"));i&&this.setActiveTab(i)};handleKeyDown=t=>{const i=document.activeElement;if(!i||i.tagName.toLowerCase()!==e("nano-tab"))return;if(["Enter"," "].includes(t.key)){const i=t.target.closest(e("nano-tab"));i&&(this.setActiveTab(i),t.preventDefault(),t.stopPropagation())}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let s=o.indexOf(i);"Home"===t.key&&(s=0),"End"===t.key&&(s=o.length-1),"top"===this.placement&&((this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key)&&(s=Math.max(0,s-1)),(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(s=Math.min(o.length-1,s+1))),"start"===this.placement&&("ArrowUp"===t.key&&(s=Math.max(0,s-1)),"ArrowDown"===t.key&&(s=Math.min(o.length-1,s+1))),o[s].setFocus(),t.stopPropagation(),t.preventDefault()};handleTouchStart=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0];this.initialTouchX=i.pageX,this.initialTouchY=i.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const i=t.changedTouches[0],o=i.pageX-this.initialTouchX,s=this.initialTouchX-i.clientX,r=this.initialTouchY-i.clientY,a=Math.abs(o)>=70&&Math.abs(r)<=50,n=this.getAllActiveTabs,e=n.findIndex((t=>t.active));if(a){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;n[e+t]&&(this.setActiveTab(n[e+t]),Math.abs(s)>Math.abs(r)&&this.activePanel.setAttribute("animation-dir",s>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}))};handleTabSlotChange=()=>{setTimeout((()=>{this.setAriaLabels(),this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1)}),500)};componentWillLoad(){this.init=!0}componentDidLoad(){new IntersectionObserver(((t,i)=>{if(t[0].intersectionRatio>0){if(this.setAriaLabels(),this.storeId){n.init(this,["tab"],this.storeMethod,this.storeId);const t=n.get(this.storeId),i=t.retrieve()?.tab;i&&i!==t.initialState?.tab&&this.getAllActiveTabs.forEach((t=>{t.active=t.panel===i}))}this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],!1),i.unobserve(t[0].target),this.init=!1}})).observe(this.host)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}render(){if(this.isRtl="rtl"===this.host.ownerDocument.dir,0!==this.getAllTabs.length)return h(r,{dir:this.isRtl?"rtl":null,class:"nano-tab-group"},h("div",{part:"base",class:{group:!0,"group--top":"top"===this.placement,"group--start":"start"===this.placement},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("nano-masked-overflow",{role:"navigation",class:"group__tabs",part:"tabs__wrapper",exportparts:"items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator",orientation:"top"===this.placement?"horizontal":"vertical",isActiveHandler:t=>this.activeTab===t,scrollControls:!this.noScrollControls,hideScrollbars:!0},h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}),h("div",{class:"group__tabs-border"})),h("div",{part:"body",class:"group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))}};d.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{--border:2px solid var(--nano-color-neutral-300);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-track-color:var(--nano-color-neutral-300);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";export{d as nano_tab_group}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,c as o,g as e,a as t}from"./index-BM3Om9WE.js";import{h as r}from"./renderer-BaP2L8CT.js";let n=0;const i=class{constructor(e){a(this,e),this.nanoTabClose=o(this,"nanoTabClose",7)}tabId="nano-tab-"+ ++n;tab;get host(){return e(this)}panel="";active=!1;disabled=!1;closable=!1;nanoTabClose;async setFocus(){this.tab.focus({preventScroll:!0})}async removeFocus(){this.tab.blur()}handleCloseClick=()=>{this.nanoTabClose.emit()};handleCloseKeydown=a=>{" "===a.key&&(a.preventDefault(),this.handleCloseClick())};render(){return r(t,{key:"67fe232bda16bf41bf1268a1891cfeb6483ebd02",id:this.host.id||this.tabId,role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",class:"nano-tab"},r("div",{key:"6f07d7d5a89071e094fe3deb19e88ec66a524f3d",part:`base${this.active?" base--active":""}${this.disabled?" base--disabled":""}${this.closable?" base--closable":""}`,class:{tab:!0,"tab--active":this.active,"tab--disabled":this.disabled,"tab--closable":this.closable}},r("slot",{key:"4c8dce458c8ae3ed526d4aed7332650be891510c",name:"start"}),r("div",{key:"e71cced02347ffaa432b5711af54666ac0a6cfd6",part:"label",ref:a=>this.tab=a,tabindex:this.disabled||!this.active?"-1":"0",class:"tab__label"},r("slot",{key:"382f7f77b009e3a5cf3af3d3b94b02e639bf2934"})),r("slot",{key:"82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2",name:"end"}),this.closable&&!this.disabled&&r("nano-icon-button",{key:"14e812f9acd5e081a1eba5014f6d4fe4b79371e2",label:"Close this tab",iconName:"light/xmark",class:"tab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,part:"close-button"})))}};i.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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";export{i as nano_tab}
+import{r as a,c as o,g as e,a as t}from"./index-BM3Om9WE.js";import{h as r}from"./renderer-DasB4P10.js";let n=0;const i=class{constructor(e){a(this,e),this.nanoTabClose=o(this,"nanoTabClose",7)}tabId="nano-tab-"+ ++n;tab;get host(){return e(this)}panel="";active=!1;disabled=!1;closable=!1;nanoTabClose;async setFocus(){this.tab.focus({preventScroll:!0})}async removeFocus(){this.tab.blur()}handleCloseClick=()=>{this.nanoTabClose.emit()};handleCloseKeydown=a=>{" "===a.key&&(a.preventDefault(),this.handleCloseClick())};render(){return r(t,{key:"67fe232bda16bf41bf1268a1891cfeb6483ebd02",id:this.host.id||this.tabId,role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",class:"nano-tab"},r("div",{key:"6f07d7d5a89071e094fe3deb19e88ec66a524f3d",part:`base${this.active?" base--active":""}${this.disabled?" base--disabled":""}${this.closable?" base--closable":""}`,class:{tab:!0,"tab--active":this.active,"tab--disabled":this.disabled,"tab--closable":this.closable}},r("slot",{key:"4c8dce458c8ae3ed526d4aed7332650be891510c",name:"start"}),r("div",{key:"e71cced02347ffaa432b5711af54666ac0a6cfd6",part:"label",ref:a=>this.tab=a,tabindex:this.disabled||!this.active?"-1":"0",class:"tab__label"},r("slot",{key:"382f7f77b009e3a5cf3af3d3b94b02e639bf2934"})),r("slot",{key:"82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2",name:"end"}),this.closable&&!this.disabled&&r("nano-icon-button",{key:"14e812f9acd5e081a1eba5014f6d4fe4b79371e2",label:"Close this tab",iconName:"light/xmark",class:"tab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,part:"close-button"})))}};i.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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";export{i as nano_tab}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{g as t,r as e,a as o}from"./index-BM3Om9WE.js";import{d as n}from"./throttle-C93FMm2Z.js";import{t as a,h as s}from"./renderer-BaP2L8CT.js";const i=class{get host(){return t(this)}propsReady=!1;compact="auto";handleCompactChange(){this.setupProperties()}scrollable=!0;hideCaption=!1;handleHideCaptionChange(){const t=this.caption;t&&t.classList.toggle("visually-hidden",this.hideCaption)}disableClickableRows=!1;resizeObserver;mutationObserver;intersectionObserver;settingUp=!1;get table(){return this.host.querySelector("table")}get caption(){return this.host.querySelector("caption")||(console.error("nano-table: No caption found. For better a11y, please add a <caption> element to the table."),null)}setupProperties=()=>{const t=this.table;if(!t||this.settingUp)return;if(this.settingUp=!0,!this.disableClickableRows){const t=Array.from(this.host.querySelectorAll("tr"));for(const e of t)1===this.getRowClickElements(e).length?(e.setAttribute("clickable","true"),e.addEventListener("click",this.rowClickHandler)):(e.removeAttribute("clickable"),e.removeEventListener("click",this.rowClickHandler))}const e=t.querySelectorAll("thead, tbody, tfoot");let o=0;if(t.querySelector("[sticky=start], [sticky=end]")){for(const t of e)t.style.setProperty("--section-height",`${t.offsetHeight}px`);const t=Array.from(this.host.querySelectorAll("thead th, thead td"));for(const e of t)e.matches("[sticky=start]")&&(this.makeCellsSticky(e,"start",o),o>0&&e.style.setProperty("--sticky-start",`${o}px`),o+=e.offsetWidth-1);o=0;for(const e of[...t].reverse())e.matches("[sticky=end]")&&(this.makeCellsSticky(e,"end",o),o>0&&e.style.setProperty("--sticky-end",`${o}px`),o+=e.offsetWidth-1)}if(t.querySelector("[sticky=top]")){o=0;for(const t of e){const e=Array.from(t.querySelectorAll("tr[sticky]"));for(const[t,n]of e.entries())n.matches("[sticky=top]")&&o>0&&n.style.setProperty("--sticky-top",`${o}px`),t===e.length-1&&(o+=n.offsetHeight-1)}}this.settingUp=!1,this.propsReady=!0};getRowClickElements(t){const e=t.querySelectorAll("a"),o=t.querySelectorAll("button"),n=Array.from(t.querySelectorAll('input[type="checkbox"]')).filter((t=>!t.closest("nano-checkbox"))),a=Array.from(t.querySelectorAll('input[type="radio"]')).filter((t=>!t.closest("nano-checkbox")));return[...e,...o,...t.querySelectorAll("nano-checkbox"),...n,...a]}rowClickHandler=t=>{const e=t.target,o=e.closest("tr");if(!o)return;const n=this.getRowClickElements(o);1===n.length&&e.closest(n[0].tagName)!==n[0]&&n[0].click()};makeCellsSticky(t,e,o=0){const n=t.closest("table"),a=t.closest("tr"),s=Array.from(a.cells);let i=0;for(const e of s){if(e===t)break;i+=e.colSpan||1}for(const t of n.tBodies)for(const n of t.rows){let t=0;for(const a of n.cells){const n=a.colSpan||1;if(t<=i&&i<t+n){a.setAttribute("sticky",e),o>0&&a.style.setProperty("--sticky-"+e,`${o}px`);break}t+=n}}}addObservers(){this.resizeObserver=new ResizeObserver((()=>{this.setupProperties()})),this.resizeObserver.observe(this.host),this.mutationObserver=new MutationObserver((()=>{this.setupProperties()}));const t=this.table;this.mutationObserver.observe(t,{childList:!0,subtree:!0}),this.intersectionObserver=new IntersectionObserver((()=>{this.setupProperties(),this.intersectionObserver.disconnect()}),{threshold:1}),this.intersectionObserver.observe(t)}cleanUpObservers(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}constructor(t){e(this,t),this.setupProperties=n(this.setupProperties,100)}connectedCallback(){this.addObservers(),this.handleHideCaptionChange()}componentDidRender(){!1!==this.scrollable&&this.table&&customElements.whenDefined(a("nano-masked-overflow")).then((()=>{this.host.querySelector(".nano-table__overflow")?.appendChild(this.table)}))}disconnectedCallback(){this.cleanUpObservers()}render(){return s(o,{key:"dfcda7c6604792e025f1ed4997395857ad786be3",class:{"nano-table":!0,"nano-table--props-ready":this.propsReady}},this.scrollable&&s("nano-masked-overflow",{key:"2ef0536af50f22134e4c0d295172817287c46196",hideScrollbars:!1,scrollControls:!1,label:this.caption?.textContent||void 0,class:"nano-table__overflow-container"},s("div",{key:"1b9ba48be1ccf92ac46f9873ac08b43a51cfcabc",class:"nano-table__overflow"})),s("slot",{key:"ab86c4eab83b69cb4ba31b22ae18f9cb0c31033a"}))}static get watchers(){return{compact:["handleCompactChange"],hideCaption:["handleHideCaptionChange"]}}};i.style=".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{i as nano_table}
+import{g as t,r as e,a as o}from"./index-BM3Om9WE.js";import{d as n}from"./throttle-C93FMm2Z.js";import{t as a,h as s}from"./renderer-DasB4P10.js";const i=class{get host(){return t(this)}propsReady=!1;compact="auto";handleCompactChange(){this.setupProperties()}scrollable=!0;hideCaption=!1;handleHideCaptionChange(){const t=this.caption;t&&t.classList.toggle("visually-hidden",this.hideCaption)}disableClickableRows=!1;resizeObserver;mutationObserver;intersectionObserver;settingUp=!1;get table(){return this.host.querySelector("table")}get caption(){return this.host.querySelector("caption")||(console.error("nano-table: No caption found. For better a11y, please add a <caption> element to the table."),null)}setupProperties=()=>{const t=this.table;if(!t||this.settingUp)return;if(this.settingUp=!0,!this.disableClickableRows){const t=Array.from(this.host.querySelectorAll("tr"));for(const e of t)1===this.getRowClickElements(e).length?(e.setAttribute("clickable","true"),e.addEventListener("click",this.rowClickHandler)):(e.removeAttribute("clickable"),e.removeEventListener("click",this.rowClickHandler))}const e=t.querySelectorAll("thead, tbody, tfoot");let o=0;if(t.querySelector("[sticky=start], [sticky=end]")){for(const t of e)t.style.setProperty("--section-height",`${t.offsetHeight}px`);const t=Array.from(this.host.querySelectorAll("thead th, thead td"));for(const e of t)e.matches("[sticky=start]")&&(this.makeCellsSticky(e,"start",o),o>0&&e.style.setProperty("--sticky-start",`${o}px`),o+=e.offsetWidth-1);o=0;for(const e of[...t].reverse())e.matches("[sticky=end]")&&(this.makeCellsSticky(e,"end",o),o>0&&e.style.setProperty("--sticky-end",`${o}px`),o+=e.offsetWidth-1)}if(t.querySelector("[sticky=top]")){o=0;for(const t of e){const e=Array.from(t.querySelectorAll("tr[sticky]"));for(const[t,n]of e.entries())n.matches("[sticky=top]")&&o>0&&n.style.setProperty("--sticky-top",`${o}px`),t===e.length-1&&(o+=n.offsetHeight-1)}}this.settingUp=!1,this.propsReady=!0};getRowClickElements(t){const e=t.querySelectorAll("a"),o=t.querySelectorAll("button"),n=Array.from(t.querySelectorAll('input[type="checkbox"]')).filter((t=>!t.closest("nano-checkbox"))),a=Array.from(t.querySelectorAll('input[type="radio"]')).filter((t=>!t.closest("nano-checkbox")));return[...e,...o,...t.querySelectorAll("nano-checkbox"),...n,...a]}rowClickHandler=t=>{const e=t.target,o=e.closest("tr");if(!o)return;const n=this.getRowClickElements(o);1===n.length&&e.closest(n[0].tagName)!==n[0]&&n[0].click()};makeCellsSticky(t,e,o=0){const n=t.closest("table"),a=t.closest("tr"),s=Array.from(a.cells);let i=0;for(const e of s){if(e===t)break;i+=e.colSpan||1}for(const t of n.tBodies)for(const n of t.rows){let t=0;for(const a of n.cells){const n=a.colSpan||1;if(t<=i&&i<t+n){a.setAttribute("sticky",e),o>0&&a.style.setProperty("--sticky-"+e,`${o}px`);break}t+=n}}}addObservers(){this.resizeObserver=new ResizeObserver((()=>{this.setupProperties()})),this.resizeObserver.observe(this.host),this.mutationObserver=new MutationObserver((()=>{this.setupProperties()}));const t=this.table;this.mutationObserver.observe(t,{childList:!0,subtree:!0}),this.intersectionObserver=new IntersectionObserver((()=>{this.setupProperties(),this.intersectionObserver.disconnect()}),{threshold:1}),this.intersectionObserver.observe(t)}cleanUpObservers(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}constructor(t){e(this,t),this.setupProperties=n(this.setupProperties,100)}connectedCallback(){this.addObservers(),this.handleHideCaptionChange()}componentDidRender(){!1!==this.scrollable&&this.table&&customElements.whenDefined(a("nano-masked-overflow")).then((()=>{this.host.querySelector(".nano-table__overflow")?.appendChild(this.table)}))}disconnectedCallback(){this.cleanUpObservers()}render(){return s(o,{key:"dfcda7c6604792e025f1ed4997395857ad786be3",class:{"nano-table":!0,"nano-table--props-ready":this.propsReady}},this.scrollable&&s("nano-masked-overflow",{key:"2ef0536af50f22134e4c0d295172817287c46196",hideScrollbars:!1,scrollControls:!1,label:this.caption?.textContent||void 0,class:"nano-table__overflow-container"},s("div",{key:"1b9ba48be1ccf92ac46f9873ac08b43a51cfcabc",class:"nano-table__overflow"})),s("slot",{key:"ab86c4eab83b69cb4ba31b22ae18f9cb0c31033a"}))}static get watchers(){return{compact:["handleCompactChange"],hideCaption:["handleHideCaptionChange"]}}};i.style=".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{i as nano_table}

package/dist/nano-components/{page-dots-Czwlqg1b.js → page-dots-CSf81OuJ.js}

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{F as t,u as i,U as s}from"./nano-slides-Cumys6rw.js";import"./index-BM3Om9WE.js";import"./renderer-BaP2L8CT.js";function h(t){this.parent=t,this.parentElement=this.parent.element.shadowRoot||this.parent.element,this.containingEl=this.parentElement.parentNode||this.parentElement,this._create()}(h.prototype=Object.create(s.prototype))._create=function(){this.holder=document.createElement("div"),this.holder.className="flickity-page-dots",this.holder.part.add("pagination"),this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},h.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.containingEl.appendChild(this.holder)},h.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.containingEl.removeChild(this.holder)},h.prototype.setDots=function(){const t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},h.prototype.addDots=function(t){const i=document.createDocumentFragment(),s=[],h=this.dots.length,n=h+t;for(let t=h;t<n;t++){const h=document.createElement("button");h.classList.add("dot"),h.innerText=`Go to slide ${t+1}`,i.appendChild(h),s.push(h)}this.holder.appendChild(i),this.dots=this.dots.concat(s)},h.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},h.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.classList.remove("is-selected"),this.selectedDot.part.remove("pagination-item--active"),this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.classList.add("is-selected"),this.selectedDot.part.add("pagination-item--active"),this.selectedDot.setAttribute("aria-current","step"))},h.prototype.onTap=h.prototype.onClick=function(t){const i=t.target;if("BUTTON"!=i.nodeName)return;this.parent.uiChange();const s=this.dots.indexOf(i);this.parent.select(s)},h.prototype.destroy=function(){this.deactivate(),this.allOff()},t.PageDots=h,i.extend(t.defaults,{pageDots:!0}),t.createMethods.push("_createPageDots");const n=t.prototype;n._createPageDots=function(){this.options.pageDots&&(this.pageDots=new h(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},n.activatePageDots=function(){this.pageDots.activate()},n.updateSelectedPageDots=function(){this.pageDots.updateSelected()},n.updatePageDots=function(){this.pageDots.setDots()},n.deactivatePageDots=function(){this.pageDots.deactivate()},t.PageDots=h;
+import{F as t,u as i,U as s}from"./nano-slides-GrbOydfa.js";import"./index-BM3Om9WE.js";import"./renderer-DasB4P10.js";function h(t){this.parent=t,this.parentElement=this.parent.element.shadowRoot||this.parent.element,this.containingEl=this.parentElement.parentNode||this.parentElement,this._create()}(h.prototype=Object.create(s.prototype))._create=function(){this.holder=document.createElement("div"),this.holder.className="flickity-page-dots",this.holder.part.add("pagination"),this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},h.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.containingEl.appendChild(this.holder)},h.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.containingEl.removeChild(this.holder)},h.prototype.setDots=function(){const t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},h.prototype.addDots=function(t){const i=document.createDocumentFragment(),s=[],h=this.dots.length,n=h+t;for(let t=h;t<n;t++){const h=document.createElement("button");h.classList.add("dot"),h.innerText=`Go to slide ${t+1}`,i.appendChild(h),s.push(h)}this.holder.appendChild(i),this.dots=this.dots.concat(s)},h.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},h.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.classList.remove("is-selected"),this.selectedDot.part.remove("pagination-item--active"),this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.classList.add("is-selected"),this.selectedDot.part.add("pagination-item--active"),this.selectedDot.setAttribute("aria-current","step"))},h.prototype.onTap=h.prototype.onClick=function(t){const i=t.target;if("BUTTON"!=i.nodeName)return;this.parent.uiChange();const s=this.dots.indexOf(i);this.parent.select(s)},h.prototype.destroy=function(){this.deactivate(),this.allOff()},t.PageDots=h,i.extend(t.defaults,{pageDots:!0}),t.createMethods.push("_createPageDots");const n=t.prototype;n._createPageDots=function(){this.options.pageDots&&(this.pageDots=new h(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},n.activatePageDots=function(){this.pageDots.activate()},n.updateSelectedPageDots=function(){this.pageDots.updateSelected()},n.updatePageDots=function(){this.pageDots.setDots()},n.deactivatePageDots=function(){this.pageDots.deactivate()},t.PageDots=h;

package/dist/nano-components/renderer-DasB4P10.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{h as n}from"./index-BM3Om9WE.js";const o=["nano-avatar","nano-badge","nano-card","nano-content-links","nano-cta","nano-feature-box","nano-icon-item","nano-option-box","nano-progress-bar","nano-skeleton","nano-spinner","nano-tag"];function t(n){return r&&n.startsWith("nano-")&&!o.includes(n)?`${r}-${n}`:n}function a(...o){const a=o[0];if(!a||"string"!=typeof a||!r)return n(...o);let e=a;"string"==typeof a&&(e=t(a));const s=o.slice(2);return n(e,o[1],s)}let r="";function e(n){return r=n,t}function s(){return r}a||(a={});export{s as g,a as h,e as s,t}

package/dist/nano-components/table.worker-Dxl1vTb_.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{c as t}from"./nano-data-table-C1hBvIg7.js";import"./index-BM3Om9WE.js";import"./renderer-DasB4P10.js";import"./math-BEqsTfVK.js";import"./throttle-C93FMm2Z.js";import"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";import"./index-BlBZYxu4.js";const r="table.worker",o="stencil.table.worker",e=new URL("table.worker-TTndpijX.js",import.meta.url).href;let s;try{s=t(e,r,o)}catch(i){const m=new Blob(['importScripts("'+e+'")'],{type:"text/javascript"}),p=URL.createObjectURL(m);s=t(p,r,o),URL.revokeObjectURL(p)}export{s as worker,o as workerMsgId,r as workerName,e as workerPath}

package/dist/types/components/collapsible-comparison/collapsible-comparison.d.ts

@@ -18,12 +18,21 @@ export declare class CollapsibleComparison {
      * Controls whether the comparison is open or closed.
      */
     open: boolean;
+    /**
+     * Optional toggle button label to show details
+     */
+    showLabel?: string;
+    /**
+     * Optional toggle button label to hide details
+     */
+    hideLabel?: string;
     /**
      * Emits when the comparison is opened and closed.
      */
     nanoToggle: EventEmitter<boolean>;
     handleOpenChange(): void;
     private handleClick;
+    private getToggleLabel;
     componentWillLoad(): void;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/cta/cta.d.ts

@@ -16,7 +16,7 @@ export declare class NanoCta {
     /** The size of the button. Defaults to large */
     size?: 'small' | 'medium' | 'large';
     /** Show a loading spinner */
-    loading?: 'true' | 'false';
+    loading?: boolean;
     /**
      * A predefined icon to show. Defaults to no icon.
      * *note* Will be overruled if a `<nano-icon />` or `<svg />` is detected

package/dist/types/components.d.ts

@@ -624,11 +624,21 @@ export namespace Components {
      * @status new
      */
     interface NanoCollapsibleComparison {
+        /**
+          * Optional toggle button label to hide details
+          * @default 'Hide details'
+         */
+        "hideLabel"?: string;
         /**
           * Controls whether the comparison is open or closed.
           * @default false
          */
         "open": boolean;
+        /**
+          * Optional toggle button label to show details
+          * @default 'Show details'
+         */
+        "showLabel"?: string;
     }
     /**
      * Content links are used to group multiple links together.
@@ -664,7 +674,7 @@ export namespace Components {
         /**
           * Show a loading spinner
          */
-        "loading"?: 'true' | 'false';
+        "loading"?: boolean;
         /**
           * Turn on the secondary style. Every theme also has a secondary style
          */
@@ -5599,6 +5609,11 @@ declare namespace LocalJSX {
      * @status new
      */
     interface NanoCollapsibleComparison {
+        /**
+          * Optional toggle button label to hide details
+          * @default 'Hide details'
+         */
+        "hideLabel"?: string;
         /**
           * Emits when the comparison is opened and closed.
          */
@@ -5608,6 +5623,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "open"?: boolean;
+        /**
+          * Optional toggle button label to show details
+          * @default 'Show details'
+         */
+        "showLabel"?: string;
     }
     /**
      * Content links are used to group multiple links together.
@@ -5643,7 +5663,7 @@ declare namespace LocalJSX {
         /**
           * Show a loading spinner
          */
-        "loading"?: 'true' | 'false';
+        "loading"?: boolean;
         /**
           * Turn on the secondary style. Every theme also has a secondary style
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-11T23:15:36",
+  "timestamp": "2025-09-22T10:39:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3358,7 +3358,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/-v_1b6Vq/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"
               }
             }
@@ -4949,7 +4949,7 @@
       "filePath": "src/components/collapsible-comparison/collapsible-comparison.tsx",
       "encapsulation": "shadow",
       "tag": "nano-collapsible-comparison",
-      "readme": "# nano-collapsible-comparison\n\n\n",
+      "readme": "# nano-collapsible-comparison\n",
       "docs": "Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item.",
       "docsTags": [
         {
@@ -4979,6 +4979,35 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "hideLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-label",
+          "reflectToAttr": false,
+          "docs": "Optional toggle button label to hide details",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Hide details'"
+            }
+          ],
+          "default": "'Hide details'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -5007,6 +5036,35 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "showLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-label",
+          "reflectToAttr": false,
+          "docs": "Optional toggle button label to show details",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Show details'"
+            }
+          ],
+          "default": "'Show details'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -5247,10 +5305,10 @@
         },
         {
           "name": "loading",
-          "type": "\"false\" | \"true\"",
+          "type": "boolean",
           "complexType": {
-            "original": "'true' | 'false'",
-            "resolved": "\"false\" | \"true\"",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
@@ -5260,12 +5318,7 @@
           "docsTags": [],
           "values": [
             {
-              "value": "false",
-              "type": "string"
-            },
-            {
-              "value": "true",
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": true,

package/docs-vscode.json

@@ -1043,9 +1043,17 @@
         "value": "Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item."
       },
       "attributes": [
+        {
+          "name": "hide-label",
+          "description": "Optional toggle button label to hide details"
+        },
         {
           "name": "open",
           "description": "Controls whether the comparison is open or closed."
+        },
+        {
+          "name": "show-label",
+          "description": "Optional toggle button label to show details"
         }
       ]
     },
@@ -1105,15 +1113,7 @@
         },
         {
           "name": "loading",
-          "description": "Show a loading spinner",
-          "values": [
-            {
-              "name": "false"
-            },
-            {
-              "name": "true"
-            }
-          ]
+          "description": "Show a loading spinner"
         },
         {
           "name": "secondary",

package/hydrate/index.js

@@ -8819,6 +8819,14 @@ class CollapsibleComparison {
      * Controls whether the comparison is open or closed.
      */
     open = false;
+    /**
+     * Optional toggle button label to show details
+     */
+    showLabel = 'Show details';
+    /**
+     * Optional toggle button label to hide details
+     */
+    hideLabel = 'Hide details';
     /**
      * Emits when the comparison is opened and closed.
      */
@@ -8837,6 +8845,9 @@ class CollapsibleComparison {
     handleClick = () => {
         this.open = !this.open;
     };
+    getToggleLabel = () => {
+        return this.open ? this.hideLabel : this.showLabel;
+    };
     componentWillLoad() {
     }
     componentDidLoad() {
@@ -8847,7 +8858,7 @@ class CollapsibleComparison {
         }
     }
     render() {
-        return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
+        return (h(Host, { key: '5cced0d90a9447ca3b8ee481478aacbeeb4d4484', class: "nano-collapsible-comparison" }, h("div", { key: 'ae25da89fa04b0a5c89210ba8292cf1db8190a30', class: "collapsible-comparison" }, h("div", { key: '7cfd1c96cc5c1553d50193a8bec9abd260e08dfc', part: "header" }, h("div", { key: 'ccc5102295b9ca9404d3c358f4d9a885d45b5885', class: "header" }, h("slot", { key: '7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8', name: "heading" }), h("nano-cta", { key: 'a10b35f5779d035d1331cdbd55c42d3007d7ce2c', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '59fde8b32c34ec3df61f96c767ce44e18482a2d5', onClick: this.handleClick }, this.getToggleLabel())), h("nano-icon-button", { key: '7f9174c6d81455fc4d3fcae99b684e26de44d7ec', label: this.getToggleLabel(), onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '1f92af4c863a0a643e47e225781bb67e32efea3e', class: "headings" }, h("slot", { key: '5744549ec533f0d1019138325310cdd6a6dd1d55', name: "comparison-headings" }))), h("div", { key: 'fb9b8acb4315686fcabd5771989c2f2bed298895', class: "content" }, h("slot", { key: '77821b17b1e3384126a1d7f7714f8779924b4b2d', name: "content" })))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"]
@@ -8857,7 +8868,9 @@ class CollapsibleComparison {
         "$flags$": 265,
         "$tagName$": "nano-collapsible-comparison",
         "$members$": {
-            "open": [1540]
+            "open": [1540],
+            "showLabel": [1, "show-label"],
+            "hideLabel": [1, "hide-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -19182,7 +19195,7 @@ class NanoCta {
             "theme": [513],
             "secondary": [516],
             "size": [513],
-            "loading": [513],
+            "loading": [516],
             "icon": [513],
             "group": [513]
         },

package/hydrate/index.mjs

@@ -8817,6 +8817,14 @@ class CollapsibleComparison {
      * Controls whether the comparison is open or closed.
      */
     open = false;
+    /**
+     * Optional toggle button label to show details
+     */
+    showLabel = 'Show details';
+    /**
+     * Optional toggle button label to hide details
+     */
+    hideLabel = 'Hide details';
     /**
      * Emits when the comparison is opened and closed.
      */
@@ -8835,6 +8843,9 @@ class CollapsibleComparison {
     handleClick = () => {
         this.open = !this.open;
     };
+    getToggleLabel = () => {
+        return this.open ? this.hideLabel : this.showLabel;
+    };
     componentWillLoad() {
     }
     componentDidLoad() {
@@ -8845,7 +8856,7 @@ class CollapsibleComparison {
         }
     }
     render() {
-        return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
+        return (h(Host, { key: '5cced0d90a9447ca3b8ee481478aacbeeb4d4484', class: "nano-collapsible-comparison" }, h("div", { key: 'ae25da89fa04b0a5c89210ba8292cf1db8190a30', class: "collapsible-comparison" }, h("div", { key: '7cfd1c96cc5c1553d50193a8bec9abd260e08dfc', part: "header" }, h("div", { key: 'ccc5102295b9ca9404d3c358f4d9a885d45b5885', class: "header" }, h("slot", { key: '7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8', name: "heading" }), h("nano-cta", { key: 'a10b35f5779d035d1331cdbd55c42d3007d7ce2c', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '59fde8b32c34ec3df61f96c767ce44e18482a2d5', onClick: this.handleClick }, this.getToggleLabel())), h("nano-icon-button", { key: '7f9174c6d81455fc4d3fcae99b684e26de44d7ec', label: this.getToggleLabel(), onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '1f92af4c863a0a643e47e225781bb67e32efea3e', class: "headings" }, h("slot", { key: '5744549ec533f0d1019138325310cdd6a6dd1d55', name: "comparison-headings" }))), h("div", { key: 'fb9b8acb4315686fcabd5771989c2f2bed298895', class: "content" }, h("slot", { key: '77821b17b1e3384126a1d7f7714f8779924b4b2d', name: "content" })))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"]
@@ -8855,7 +8866,9 @@ class CollapsibleComparison {
         "$flags$": 265,
         "$tagName$": "nano-collapsible-comparison",
         "$members$": {
-            "open": [1540]
+            "open": [1540],
+            "showLabel": [1, "show-label"],
+            "hideLabel": [1, "hide-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -19180,7 +19193,7 @@ class NanoCta {
             "theme": [513],
             "secondary": [516],
             "size": [513],
-            "loading": [513],
+            "loading": [516],
             "icon": [513],
             "group": [513]
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.7.0",
+  "version": "8.7.2",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.7.0"
+    "@nanoporetech-digital/style": "8.7.2"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

package/dist/nano-components/lazyload-DZWueTsT.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{F as t,u as i}from"./nano-slides-Cumys6rw.js";import"./index-BM3Om9WE.js";import"./renderer-BaP2L8CT.js";t.createMethods.push("_createLazyload");const s=t.prototype;function a(t,i){this.img=t,this.flickity=i,this.load()}s._createLazyload=function(){this.on("select",this.lazyLoad)},s.lazyLoad=function(){const t=this.options.lazyLoad;if(!t)return;const s=this.getAdjacentCellElements("number"==typeof t?t:0);let l=[];s.forEach((function(t){const s=function(t){if("IMG"==t.nodeName){const i=t.getAttribute("data-flickity-lazyload"),s=t.getAttribute("data-flickity-lazyload-src"),a=t.getAttribute("data-flickity-lazyload-srcset");if(i||s||a)return[t]}const s=t.querySelectorAll("img[data-flickity-lazyload], img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]");return i.makeArray(s)}(t);l=l.concat(s)})),l.forEach((function(t){new a(t,this)}),this)},a.prototype.handleEvent=i.handleEvent,a.prototype.load=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this);const t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src"),i=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t,i&&this.img.setAttribute("srcset",i),this.img.removeAttribute("data-flickity-lazyload"),this.img.removeAttribute("data-flickity-lazyload-src"),this.img.removeAttribute("data-flickity-lazyload-srcset")},a.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")},a.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")},a.prototype.complete=function(t,i){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this);const s=this.flickity.getParentCell(this.img),a=s&&s.element;this.flickity.cellSizeChange(a),this.img.classList.add(i),this.flickity.dispatchEvent("lazyLoad",t,a)},t.LazyLoader=a;

package/dist/nano-components/renderer-BaP2L8CT.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{h as n}from"./index-BM3Om9WE.js";const t=["nano-avatar","nano-badge","nano-card","nano-cta","nano-icon-item","nano-tag","nano-content-links"];function o(n){return r&&n.startsWith("nano-")&&!t.includes(n)?`${r}-${n}`:n}function a(...t){const a=t[0];if(!a||"string"!=typeof a||!r)return n(...t);let e=a;"string"==typeof a&&(e=o(a));const i=t.slice(2);return n(e,t[1],i)}let r="";function e(n){return r=n,o}function i(){return r}a||(a={});export{i as g,a as h,e as s,o as t}

package/dist/nano-components/table.worker-DJks4i_l.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{c as t}from"./nano-data-table-CWliPF7Y.js";import"./index-BM3Om9WE.js";import"./renderer-BaP2L8CT.js";import"./math-BEqsTfVK.js";import"./throttle-C93FMm2Z.js";import"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";import"./index-BlBZYxu4.js";const r="table.worker",o="stencil.table.worker",e=new URL("table.worker-TTndpijX.js",import.meta.url).href;let i;try{i=t(e,r,o)}catch(s){const m=new Blob(['importScripts("'+e+'")'],{type:"text/javascript"}),p=URL.createObjectURL(m);i=t(p,r,o),URL.revokeObjectURL(p)}export{i as worker,o as workerMsgId,r as workerName,e as workerPath}