@nanoporetech-digital/components 8.0.0-alpha.11 → 8.0.0-alpha.13

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-lEfdugE-.js');
-var renderer = require('./renderer-Cp5bbbnx.js');
+var index = require('./index-DxiOGt08.js');
+var renderer = require('./renderer-BnqVSAc0.js');
 
 const tabCss = ":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-1000);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-small);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)}";
 

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

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-lEfdugE-.js');
+var index = require('./index-DxiOGt08.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-Cp5bbbnx.js');
+var renderer = require('./renderer-BnqVSAc0.js');
 
 const tableCss = ".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}}";
 

package/dist/cjs/{page-dots-DnxKCAbO.js → page-dots-KutnmYpQ.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-CXU8XyXL.js');
-require('./index-lEfdugE-.js');
-require('./renderer-Cp5bbbnx.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
+require('./index-DxiOGt08.js');
+require('./renderer-BnqVSAc0.js');
 
 // -------------------------- PageDots -------------------------- //
 function PageDots(parent) {

package/dist/cjs/{renderer-Cp5bbbnx.js → renderer-BnqVSAc0.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-lEfdugE-.js');
+var index = require('./index-DxiOGt08.js');
 
 /* eslint-disable @typescript-eslint/no-namespace */
 // css only components cannot be transformed because their static css relies on the tag name

package/dist/cjs/{scroll-oYroBCcY.js → scroll-Drq3PYD1.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dom = require('./dom-DrCOFZHp.js');
+var dom = require('./dom-Lc3nZSfj.js');
 
 /**
  * @returns the width of the document's scrollbar

package/dist/cjs/{slot-DamVLdw5.js → slot-CES6Hsw2.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-lEfdugE-.js');
+var index = require('./index-DxiOGt08.js');
 
 /**
  * Given an element (which can either be within a shadowRoot or not) find it's innerText

package/dist/cjs/{tabbable-5kSrTVb2.js → tabbable-DpUHjeI_.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-lEfdugE-.js');
+require('./index-DxiOGt08.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-Dj-G_N11.js → table.worker-iOdjCdrO.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-BygClX0L.js');
-require('./index-lEfdugE-.js');
-require('./renderer-Cp5bbbnx.js');
+var nanoDataTable_entry = require('./nano-data-table-DpoWsfe-.js');
+require('./index-DxiOGt08.js');
+require('./renderer-BnqVSAc0.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-oYroBCcY.js');
-require('./dom-DrCOFZHp.js');
-require('./index-BtfGVqVr.js');
+require('./scroll-Drq3PYD1.js');
+require('./dom-Lc3nZSfj.js');
+require('./index-CFe0EAH2.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/collection-manifest.json

@@ -67,7 +67,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.3-dev.1752222710.56fe6e3",
+    "version": "4.35.3-dev.1752259270.e005970",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/data-table/table.pin-service.js

@@ -4,12 +4,13 @@
 import { readTask, writeTask } from "@stencil/core";
 import { CSSNAMESPACE } from "./table.constants";
 function addStyleSheet(id, css) {
-    const styleSheet = document.getElementById(id) ||
+    const root = this.host.getRootNode();
+    const styleSheet = root.getElementById(id) ||
         document.createElement('style');
     styleSheet.id = id;
     styleSheet.innerHTML = css;
     if (!styleSheet.isConnected)
-        document.head.append(styleSheet);
+        root.append(styleSheet);
 }
 /**
  * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.

package/dist/collection/components/img/img.css

@@ -38,7 +38,7 @@
     }
   }:host {
   /**
-   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`
+   * @prop --padding: padding around any content. Only relevant when using `background` attribute. Defaults to `0`.
   */
   --padding: 0;
   display: inline-block;

package/dist/collection/components/img/img.js

@@ -4,7 +4,11 @@
 import { Build, Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
- * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
+ * Utilities for displaying images; standard or background.
+ *
+ * @status deprecated
+ * @version 1.0.0
+ *
  * @slot - Main slot. Only relevant with `<nano-img background>`
  */
 export class Img {
@@ -134,16 +138,16 @@ export class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("div", { key: '7b3a0b8521888092effb1fc675b0c52bce7faa6f', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '1f4d59fc6ff3e0be42f18d1db4a099a32d099872', class: {
+        return (h(Host, { key: '246b2bd0d05e76d4756a170534b84eeeb47b5692', class: "nano-img" }, h("div", { key: '17455932f3f0b6fef46b86f3731d1604295de25d', class: "img" }, h("div", { key: 'fb07e1f16faf27c6226a313c4bbcc54ccda29643', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '7e7a83eb7b4a75be00662f8dcd06b9452b4fcc21', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'd987180d13fa9ef34868c8e962344da9e0f6b876' }))), h("img", { key: 'f3d603cf35bf0c37c4e1eb530e9a9ea7d7e81beb', class: {
+            }, style: bgStyle }, h("slot", { key: '6fb65b4a0f745b517c0688da8b3fecae769d2e71' }))), h("img", { key: '8872cd76b14e32bfa3051ae1b2953ee2f01bf609', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'cf77dadeb8d5b01ef1afff5e6df5eb6aacad13e6', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '677afcbf603e4649a202f3a4d566c73c0fc70e10', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get is() { return "nano-img"; }
     static get encapsulation() { return "shadow"; }

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

@@ -175,6 +175,14 @@ export class NavItem {
             slottedA.remove();
         }
     };
+    /** Closes the secondary nav panel if it is open */
+    async closeMenu() {
+        this.closeSecondary();
+    }
+    /** Opens the secondary nav panel if it is not open */
+    async openMenu() {
+        this.openSecondary();
+    }
     connectedCallback() {
         this.handleDefaultSlotChange();
         this.isInMenuDrawer = !!this.host.closest(transformTag('nano-menu-drawer'));
@@ -183,22 +191,22 @@ export class NavItem {
         this.openChange();
     }
     render() {
-        return (h(Host, { key: '815fb74d8f91f3efb7c2582439b1e8f4f4aa905d', class: {
+        return (h(Host, { key: 'b6ce27588c1ca2ac2a42d0aada06d7f554a1174a', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '63a0f2086fd81b4cbea08c385de2e493d7c8f926', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e8faa3568a13feb95ef131f0bd412577120fbf84', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'e50cab85eba47cba80ff30a07bcab83c00595915', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4a4da7478db63015d0dcd81ed053146f8eeac5f3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '2fc43a8c964c8e34e045e0df85d5bf355b3e9b26', name: "icon-start" }), h("span", { key: '6aed9dea66e87ef15edb69971b1c97fd8d2fbe29', class: "navitem__label", part: "label" }, h("slot", { key: '96f26809714cbe44effe57851814e1e24a6ad851', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: 'f43de3bfdb6cdea0f93fe248d873c73062a3034b', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '9db35da35c662d588729976d1be17a07ed855642', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '1eafb7864368850ad2539c402eb1b00877f3d55e', name: "icon-start" }), h("span", { key: '8953312d4dad64ced970d2f1120c07b6c36070f1', class: "navitem__label", part: "label" }, h("slot", { key: '390f468f8d1f5d4f0669cae53ef140e452b16b07', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '0694ce0708264ef1305e4b926a2f40f1875025a9', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '394a189a9d5d8b65607bd6089c9a08cdeed8e48a', name: "icon-start" }), h("span", { key: '28b56da5d700f7654c2d42fda996babff390f92e', class: "navitem__label", part: "label" }, h("slot", { key: '13a35382772f7ee79af116c500eba5d4fd4a25ad', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '158f3590fcf2025c3c53bd3d3f9dbeddbd2829ba', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '44ab1a0d6930f5d60b8540157911d365821f611c', part: "modal", class: {
+            } }, h("slot", { key: 'c3cc4fcbb527f5f8ea2786243fe610d587e36190', name: "icon-start" }), h("span", { key: '385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171', class: "navitem__label", part: "label" }, h("slot", { key: '4e7a75c8903081856c20206aa309c2a9855991da', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '668b95901ba0b914ccc193d4f3cc4433d908c014', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '758dc3ed99502ff459b187fb42dc6f1c83f335e8', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: 'fb30657f31352b234b8f5f9f7dea697b663dc05d', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: 'de6bdeb04bf0543c2200cca7a7a1d8d70032d0ed', name: "close-button" }))), h("slot", { key: '45c2c6ce36042b43c8177343e238392193a16367', name: "secondary" })), h("div", { key: 'd9ccc26e9f2675dcf5fc9000bc2759fd48247fe2', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '70a4b002e989753c461c7dac4dd975200a92e3de', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '7b0daad80ae03a29789c9d2bef74d2473f2f1f39', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '858798062958ea0f4ee809cbf853bdb83dd4d184', name: "close-button" }))), h("slot", { key: '41583a8cc59babbfb1a9a084a3de31c61a145fbc', name: "secondary" })), h("div", { key: '5c260dca9a8fdf7951349df64a037fc7415c3c4b', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get is() { return "nano-nav-item"; }
     static get encapsulation() { return "shadow"; }
@@ -467,6 +475,40 @@ export class NavItem {
                     "text": "Sets focus on the first button or anchor present. Use this method instead of the global\n`element.focus()`.",
                     "tags": []
                 }
+            },
+            "closeMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the secondary nav panel if it is open",
+                    "tags": []
+                }
+            },
+            "openMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the secondary nav panel if it is not open",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/slides/slides.js

@@ -116,24 +116,27 @@ export class Slides {
         }
         // is a custom animation
         if (typeof this.animation === 'function') {
-            this.options = { fade: false, percentPosition: true };
+            this.updateOptions({ fade: false, percentPosition: true });
             flkty.on('scroll', this.animation);
             return;
         }
         // setup new stuff
         switch (this.animation) {
             case 'fade':
-                this.options = { fade: true, percentPosition: true };
+                this.updateOptions({ fade: true, percentPosition: true });
                 break;
             case 'parallax':
-                this.options = { fade: false, percentPosition: true };
+                this.updateOptions({ fade: false, percentPosition: true });
                 flkty.on('scroll', this.parallax);
                 break;
             default:
-                this.options = { fade: false, percentPosition: true };
+                this.updateOptions({ fade: false, percentPosition: true });
                 break;
         }
     }
+    updateOptions(opts) {
+        this.options = { ...this.options, ...opts };
+    }
     /** Zero-based index of the selected cell. */
     currentSlide = 0;
     currentSlideChange() {
@@ -499,15 +502,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '4f3e88fcb168e5504c1cbb7649eb7233f235dff7', class: "nano-slides" }, h("div", { key: '0c80e9c3b733ee41f6b06a473eeef9ab06eae1cd', class: {
+        return (h(Host, { key: '42935259126aea21edcf5ecb256d0c1fbbde543a', class: "nano-slides" }, h("div", { key: '933ffba7ee7036d4a8e7fddac8396eaf6b53ad9f', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'beae0495f2effa9d6bb5d6a093fd76b50bd3027e', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '5cd48261734c266f25f83cf63b60300c94868d52', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: '89282a60c520a65e2155836ab66f698520b47721' })), h("div", { key: 'fd3e6b6fb4d75ceb6002b389e63930d69965d304', class: "ui-extras" }, h("slot", { key: '8dfacb9cc08a4fc13f998b9a97e5079640fe5ede', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'b04069a6bdbc76261a431b22660d012c25a8fb14' })), h("div", { key: '978e708ec781ff7aadc3928560f704669c60c1ab', class: "ui-extras" }, h("slot", { key: 'fd930c490857b9fab6b088015178151003f00f62', name: "ui" })))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab-group.css

@@ -38,14 +38,14 @@
     }
   }:host {
   /**
-   * @prop --border. The border of the tab group. Defaults to `2px solid var(--nano-color-neutral-300)`.
-   * @prop --indicator-transition. The time it takes for the indicator to transition. Defaults to `var(--nano-transition-fast)`.
-   * @prop --indicator-color. The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --indicator-track-color. The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.
-   * @prop --indicator-size. The size of the indicator. Defaults to `0`.
-   * @prop --fade-transparency. The transparency of the fade effect. Defaults to `0`.
-   * @prop --tab-spacing. The spacing between tabs. Defaults to `var(--nano-spacing-md)`.
-   * @prop --content-spacing. The spacing around the content area. Defaults to `var(--nano-spacing-l1-default)`.
+   * @prop --border: The border of the tab group. Defaults to `2px solid var(--nano-color-neutral-300)`.
+   * @prop --indicator-transition: The time it takes for the indicator to transition. Defaults to `var(--nano-transition-fast)`.
+   * @prop --indicator-color: The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --indicator-track-color: The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.
+   * @prop --indicator-size: The size of the indicator. Defaults to `0`.
+   * @prop --fade-transparency: The transparency of the fade effect. Defaults to `0`.
+   * @prop --tab-spacing: The spacing between tabs. Defaults to `var(--nano-spacing-md)`.
+   * @prop --content-spacing: The spacing around the content area. Defaults to `var(--nano-spacing-l1-default)`.
    */
   --border: 2px solid var(--nano-color-neutral-300);
   --indicator-transition: var(--nano-transition-fast);

package/dist/collection/components/tabs/tab.css

@@ -39,12 +39,12 @@
   }/** Typography */
 :host {
   /**
-   * @prop --border. The border of the tab. Defaults to `2px solid var(--nano-color-neutral-300)`.
-   * @prop --border-hover-color. The color of the border on hover. Defaults to `var(--nano-color-primary-700)`.
-   * @prop --border-active-color. The color of the border when active. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --text-hover-color. The color of the text on hover. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --text-active-color. The color of the text when active. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --padding. The padding of the tab. Defaults to `var(--nano-spacing-md)`.
+   * @prop --border: The border of the tab. Defaults to `2px solid var(--nano-color-neutral-300)`.
+   * @prop --border-hover-color: The color of the border on hover. Defaults to `var(--nano-color-primary-700)`.
+   * @prop --border-active-color: The color of the border when active. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --text-hover-color: The color of the text on hover. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --text-active-color: The color of the text when active. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --padding: The padding of the tab. Defaults to `var(--nano-spacing-md)`.
    */
   --border: 2px solid var(--nano-color-neutral-300);
   --border-hover-color: var(--nano-color-primary-700);

package/dist/components/img.js

@@ -142,16 +142,16 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("div", { key: '7b3a0b8521888092effb1fc675b0c52bce7faa6f', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '1f4d59fc6ff3e0be42f18d1db4a099a32d099872', class: {
+        return (h(Host, { key: '246b2bd0d05e76d4756a170534b84eeeb47b5692', class: "nano-img" }, h("div", { key: '17455932f3f0b6fef46b86f3731d1604295de25d', class: "img" }, h("div", { key: 'fb07e1f16faf27c6226a313c4bbcc54ccda29643', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '7e7a83eb7b4a75be00662f8dcd06b9452b4fcc21', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'd987180d13fa9ef34868c8e962344da9e0f6b876' }))), h("img", { key: 'f3d603cf35bf0c37c4e1eb530e9a9ea7d7e81beb', class: {
+            }, style: bgStyle }, h("slot", { key: '6fb65b4a0f745b517c0688da8b3fecae769d2e71' }))), h("img", { key: '8872cd76b14e32bfa3051ae1b2953ee2f01bf609', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'cf77dadeb8d5b01ef1afff5e6df5eb6aacad13e6', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '677afcbf603e4649a202f3a4d566c73c0fc70e10', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],

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

@@ -679,12 +679,13 @@ children, utils) => {
 };
 
 function addStyleSheet(id, css) {
-    const styleSheet = document.getElementById(id) ||
+    const root = this.host.getRootNode();
+    const styleSheet = root.getElementById(id) ||
         document.createElement('style');
     styleSheet.id = id;
     styleSheet.innerHTML = css;
     if (!styleSheet.isConnected)
-        document.head.append(styleSheet);
+        root.append(styleSheet);
 }
 /**
  * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.

package/dist/components/nav-item.js

@@ -232,6 +232,14 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
             slottedA.remove();
         }
     };
+    /** Closes the secondary nav panel if it is open */
+    async closeMenu() {
+        this.closeSecondary();
+    }
+    /** Opens the secondary nav panel if it is not open */
+    async openMenu() {
+        this.openSecondary();
+    }
     connectedCallback() {
         this.handleDefaultSlotChange();
         this.isInMenuDrawer = !!this.host.closest(transformTag('nano-menu-drawer'));
@@ -240,22 +248,22 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         this.openChange();
     }
     render() {
-        return (h(Host, { key: '815fb74d8f91f3efb7c2582439b1e8f4f4aa905d', class: {
+        return (h(Host, { key: 'b6ce27588c1ca2ac2a42d0aada06d7f554a1174a', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '63a0f2086fd81b4cbea08c385de2e493d7c8f926', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e8faa3568a13feb95ef131f0bd412577120fbf84', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'e50cab85eba47cba80ff30a07bcab83c00595915', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: '4a4da7478db63015d0dcd81ed053146f8eeac5f3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '2fc43a8c964c8e34e045e0df85d5bf355b3e9b26', name: "icon-start" }), h("span", { key: '6aed9dea66e87ef15edb69971b1c97fd8d2fbe29', class: "navitem__label", part: "label" }, h("slot", { key: '96f26809714cbe44effe57851814e1e24a6ad851', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: 'f43de3bfdb6cdea0f93fe248d873c73062a3034b', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '9db35da35c662d588729976d1be17a07ed855642', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '1eafb7864368850ad2539c402eb1b00877f3d55e', name: "icon-start" }), h("span", { key: '8953312d4dad64ced970d2f1120c07b6c36070f1', class: "navitem__label", part: "label" }, h("slot", { key: '390f468f8d1f5d4f0669cae53ef140e452b16b07', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '0694ce0708264ef1305e4b926a2f40f1875025a9', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-            } }, h("slot", { key: '394a189a9d5d8b65607bd6089c9a08cdeed8e48a', name: "icon-start" }), h("span", { key: '28b56da5d700f7654c2d42fda996babff390f92e', class: "navitem__label", part: "label" }, h("slot", { key: '13a35382772f7ee79af116c500eba5d4fd4a25ad', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '158f3590fcf2025c3c53bd3d3f9dbeddbd2829ba', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '44ab1a0d6930f5d60b8540157911d365821f611c', part: "modal", class: {
+            } }, h("slot", { key: 'c3cc4fcbb527f5f8ea2786243fe610d587e36190', name: "icon-start" }), h("span", { key: '385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171', class: "navitem__label", part: "label" }, h("slot", { key: '4e7a75c8903081856c20206aa309c2a9855991da', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '668b95901ba0b914ccc193d4f3cc4433d908c014', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: 'f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '758dc3ed99502ff459b187fb42dc6f1c83f335e8', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: 'fb30657f31352b234b8f5f9f7dea697b663dc05d', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: 'de6bdeb04bf0543c2200cca7a7a1d8d70032d0ed', name: "close-button" }))), h("slot", { key: '45c2c6ce36042b43c8177343e238392193a16367', name: "secondary" })), h("div", { key: 'd9ccc26e9f2675dcf5fc9000bc2759fd48247fe2', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '70a4b002e989753c461c7dac4dd975200a92e3de', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '7b0daad80ae03a29789c9d2bef74d2473f2f1f39', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '858798062958ea0f4ee809cbf853bdb83dd4d184', name: "close-button" }))), h("slot", { key: '41583a8cc59babbfb1a9a084a3de31c61a145fbc', name: "secondary" })), h("div", { key: '5c260dca9a8fdf7951349df64a037fc7415c3c4b', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
@@ -272,7 +280,9 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         "closeOnBlur": [4, "close-on-blur"],
         "didOpen": [32],
         "isInMenuDrawer": [32],
-        "setFocus": [64]
+        "setFocus": [64],
+        "closeMenu": [64],
+        "openMenu": [64]
     }, [[16, "click", "handleClose"], [16, "keyup", "handleClose"]], {
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]

package/dist/components/slides.js

@@ -2575,24 +2575,27 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         }
         // is a custom animation
         if (typeof this.animation === 'function') {
-            this.options = { fade: false, percentPosition: true };
+            this.updateOptions({ fade: false, percentPosition: true });
             flkty.on('scroll', this.animation);
             return;
         }
         // setup new stuff
         switch (this.animation) {
             case 'fade':
-                this.options = { fade: true, percentPosition: true };
+                this.updateOptions({ fade: true, percentPosition: true });
                 break;
             case 'parallax':
-                this.options = { fade: false, percentPosition: true };
+                this.updateOptions({ fade: false, percentPosition: true });
                 flkty.on('scroll', this.parallax);
                 break;
             default:
-                this.options = { fade: false, percentPosition: true };
+                this.updateOptions({ fade: false, percentPosition: true });
                 break;
         }
     }
+    updateOptions(opts) {
+        this.options = { ...this.options, ...opts };
+    }
     /** Zero-based index of the selected cell. */
     currentSlide = 0;
     currentSlideChange() {
@@ -2958,15 +2961,15 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '4f3e88fcb168e5504c1cbb7649eb7233f235dff7', class: "nano-slides" }, h("div", { key: '0c80e9c3b733ee41f6b06a473eeef9ab06eae1cd', class: {
+        return (h(Host, { key: '42935259126aea21edcf5ecb256d0c1fbbde543a', class: "nano-slides" }, h("div", { key: '933ffba7ee7036d4a8e7fddac8396eaf6b53ad9f', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'beae0495f2effa9d6bb5d6a093fd76b50bd3027e', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '5cd48261734c266f25f83cf63b60300c94868d52', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: '89282a60c520a65e2155836ab66f698520b47721' })), h("div", { key: 'fd3e6b6fb4d75ceb6002b389e63930d69965d304', class: "ui-extras" }, h("slot", { key: '8dfacb9cc08a4fc13f998b9a97e5079640fe5ede', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'b04069a6bdbc76261a431b22660d012c25a8fb14' })), h("div", { key: '978e708ec781ff7aadc3928560f704669c60c1ab', class: "ui-extras" }, h("slot", { key: 'fd930c490857b9fab6b088015178151003f00f62', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],

package/dist/esm/{algolia-data-CHDAQ-na.js → algolia-data-1P9wrf61.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { g as getElement } from './index-CDb2_YWF.js';
+import { g as getElement } from './index-D6WdRvhp.js';
 
 var createDeferredPromise = function () {
     var resolve;

package/dist/esm/{component-store-BA4haUxz.js → component-store-DfmxxsJV.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { g as getElement } from './index-CDb2_YWF.js';
+import { g as getElement } from './index-D6WdRvhp.js';
 import { d as debounce } from './throttle-C93FMm2Z.js';
 
 function parse(searchParams, replacer) {

package/dist/esm/{dom-DpX4e3pw.js → dom-dabRzt7p.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import './index-CDb2_YWF.js';
+import './index-D6WdRvhp.js';
 
 var NODE_TYPE;
 (function (NODE_TYPE) {

package/dist/esm/{fade-Dt3mCRd5.js → fade-DJjEJ3OV.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-BH9wpDRh.js';
-import './index-CDb2_YWF.js';
-import './renderer-CGoibSOJ.js';
+import { F as Flickity, u as utils } from './nano-slides-B1zM-u4Y.js';
+import './index-D6WdRvhp.js';
+import './renderer-BhDJHRB-.js';
 
 const Slide = Flickity.Slide;
 const slideUpdateTarget = Slide.prototype.updateTarget;

package/dist/esm/{form-control-BQDNikCR.js → form-control-DJJ-dewI.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h } from './renderer-CGoibSOJ.js';
+import { h } from './renderer-BhDJHRB-.js';
 
 const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
     if (!label && !hasLabelSlot)

package/dist/esm/{fullscreen-CiMUnO6C.js → fullscreen-C0Rg1tXP.js}

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-BH9wpDRh.js';
-import './index-CDb2_YWF.js';
-import './renderer-CGoibSOJ.js';
+import { F as Flickity } from './nano-slides-B1zM-u4Y.js';
+import './index-D6WdRvhp.js';
+import './renderer-BhDJHRB-.js';
 
 Flickity.createMethods.push('_createFullscreen');
 const proto = Flickity.prototype;

package/dist/esm/{index-Cb6_W06a.js → index-BC1-owN1.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { i as getRenderingRef, j as forceUpdate } from './index-CDb2_YWF.js';
+import { i as getRenderingRef, j as forceUpdate } from './index-D6WdRvhp.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);