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

package/dist/cjs/{fade-QCWQMt6E.js → fade-CiX74e7g.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C79dDqp3.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 

package/dist/cjs/{fullscreen-BYiPBVB-.js → fullscreen-CRDiLBHG.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C79dDqp3.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 

package/dist/cjs/{lazyload-CE9AflwC.js → lazyload-DQBOwjop.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C79dDqp3.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 

package/dist/cjs/{nano-data-table-Bt1hEvrv.js → nano-data-table-DpoWsfe-.js}

@@ -114,7 +114,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = Promise.resolve().then(function () { return require('./table.worker-DJPRsl4W.js'); }).then(m => m.worker);
+const workerPromise = Promise.resolve().then(function () { return require('./table.worker-iOdjCdrO.js'); }).then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -674,12 +674,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/cjs/nano-data-table.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-Bt1hEvrv.js');
+var nanoDataTable_entry = require('./nano-data-table-DpoWsfe-.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 require('./math-DIjJ3V87.js');

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

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

package/dist/cjs/{nano-slides-C79dDqp3.js → nano-slides-CEgnF-Y8.js}

@@ -2575,24 +2575,27 @@ const Slides = class {
         }
         // 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() {
@@ -2810,19 +2813,19 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-BYiPBVB-.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-CRDiLBHG.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-CE9AflwC.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-DQBOwjop.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasDotsModule && opts.pageDots) {
-            await Promise.resolve().then(function () { return require('./page-dots-S-JrbRKH.js'); });
+            await Promise.resolve().then(function () { return require('./page-dots-KutnmYpQ.js'); });
             this.hasDotsModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-QCWQMt6E.js'); });
+            await Promise.resolve().then(function () { return require('./fade-CiX74e7g.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2957,15 +2960,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: '4f3e88fcb168e5504c1cbb7649eb7233f235dff7', class: "nano-slides" }, renderer.h("div", { key: '0c80e9c3b733ee41f6b06a473eeef9ab06eae1cd', class: {
+        return (renderer.h(index.Host, { key: '42935259126aea21edcf5ecb256d0c1fbbde543a', class: "nano-slides" }, renderer.h("div", { key: '933ffba7ee7036d4a8e7fddac8396eaf6b53ad9f', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: 'beae0495f2effa9d6bb5d6a093fd76b50bd3027e', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.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" }, renderer.h("slot", { key: '89282a60c520a65e2155836ab66f698520b47721' })), renderer.h("div", { key: 'fd3e6b6fb4d75ceb6002b389e63930d69965d304', class: "ui-extras" }, renderer.h("slot", { key: '8dfacb9cc08a4fc13f998b9a97e5079640fe5ede', name: "ui" })))));
+            }, part: "slide-container" }, renderer.h("slot", { key: 'b04069a6bdbc76261a431b22660d012c25a8fb14' })), renderer.h("div", { key: '978e708ec781ff7aadc3928560f704669c60c1ab', class: "ui-extras" }, renderer.h("slot", { key: 'fd930c490857b9fab6b088015178151003f00f62', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C79dDqp3.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C79dDqp3.js');
+var nanoSlides_entry = require('./nano-slides-CEgnF-Y8.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-Bt1hEvrv.js');
+var nanoDataTable_entry = require('./nano-data-table-DpoWsfe-.js');
 require('./index-DxiOGt08.js');
 require('./renderer-BnqVSAc0.js');
 require('./math-DIjJ3V87.js');

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/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/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/{fade-BwtMNpw7.js → fade-DJjEJ3OV.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DEqstC8u.js';
+import { F as Flickity, u as utils } from './nano-slides-B1zM-u4Y.js';
 import './index-D6WdRvhp.js';
 import './renderer-BhDJHRB-.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-DEqstC8u.js';
+import { F as Flickity } from './nano-slides-B1zM-u4Y.js';
 import './index-D6WdRvhp.js';
 import './renderer-BhDJHRB-.js';
 

package/dist/esm/{lazyload-CBLyQMEG.js → lazyload-BGGkN269.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DEqstC8u.js';
+import { F as Flickity, u as utils } from './nano-slides-B1zM-u4Y.js';
 import './index-D6WdRvhp.js';
 import './renderer-BhDJHRB-.js';
 

package/dist/esm/{nano-data-table-BqsFe2Ik.js → nano-data-table-TfPKf5LE.js}

@@ -112,7 +112,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = import('./table.worker-BJVVUKdP.js').then(m => m.worker);
+const workerPromise = import('./table.worker-Dq_pppel.js').then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -672,12 +672,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/esm/nano-data-table.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-export { N as nano_data_table } from './nano-data-table-BqsFe2Ik.js';
+export { N as nano_data_table } from './nano-data-table-TfPKf5LE.js';
 import './index-D6WdRvhp.js';
 import './renderer-BhDJHRB-.js';
 import './math-BEqsTfVK.js';

package/dist/esm/nano-grid_2.entry.js

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

package/dist/esm/{nano-slides-DEqstC8u.js → nano-slides-B1zM-u4Y.js}

@@ -2573,24 +2573,27 @@ const Slides = class {
         }
         // 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() {
@@ -2808,19 +2811,19 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await import('./fullscreen-CLTOaIQ8.js');
+            await import('./fullscreen-C0Rg1tXP.js');
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await import('./lazyload-CBLyQMEG.js');
+            await import('./lazyload-BGGkN269.js');
             this.hasLazyLoadModule = true;
         }
         if (!this.hasDotsModule && opts.pageDots) {
-            await import('./page-dots-2yJYdWP9.js');
+            await import('./page-dots-D9sLGqee.js');
             this.hasDotsModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await import('./fade-BwtMNpw7.js');
+            await import('./fade-DJjEJ3OV.js');
             this.hasFadeModule = true;
         }
     }
@@ -2955,15 +2958,15 @@ const Slides = class {
         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"],