@nanoporetech-digital/components 8.12.2 → 8.12.3

package/dist/cjs/{fade-CaQNh008.js → fade-C7mRKYJR.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-lMA8e6L6.js');
+var nanoSlides_entry = require('./nano-slides-DFBGKfHj.js');
 require('./index-DGttnXif.js');
 require('./renderer-jVpDRMfV.js');
 

package/dist/cjs/{fullscreen-CYmWUVa6.js → fullscreen-C0vzuH0_.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-lMA8e6L6.js');
+var nanoSlides_entry = require('./nano-slides-DFBGKfHj.js');
 require('./index-DGttnXif.js');
 require('./renderer-jVpDRMfV.js');
 

package/dist/cjs/{lazyload-CDp0tl8u.js → lazyload-Cqdwd4el.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-lMA8e6L6.js');
+var nanoSlides_entry = require('./nano-slides-DFBGKfHj.js');
 require('./index-DGttnXif.js');
 require('./renderer-jVpDRMfV.js');
 

package/dist/cjs/{nano-slides-lMA8e6L6.js → nano-slides-DFBGKfHj.js}

@@ -2490,7 +2490,6 @@ const Slides = class {
     }
     flickityEl;
     flickityReady = false;
-    mutationO;
     resizeO;
     readyflickity;
     flickity = new Promise((resolve) => {
@@ -2554,7 +2553,7 @@ const Slides = class {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -2644,9 +2643,11 @@ const Slides = class {
      * child slides.
      */
     async update() {
+        if (!this.didInit)
+            return;
         const [flickity] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${renderer.transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -2818,15 +2819,15 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-CYmWUVa6.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-C0vzuH0_.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-CDp0tl8u.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-Cqdwd4el.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-CaQNh008.js'); });
+            await Promise.resolve().then(function () { return require('./fade-C7mRKYJR.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2834,7 +2835,7 @@ const Slides = class {
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await this.waitForSlides(this.host);
+        await this.waitForSlides();
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -2924,8 +2925,8 @@ const Slides = class {
         // @ts-expect-error - merged options don't quite match the flickity options
         return { ...flickityOptions, ...mergedEventOptions, ...this.options };
     }
-    waitForSlides = (host) => {
-        const allSlides = Array.from(host.querySelectorAll(renderer.transformTag('nano-slide')));
+    waitForSlides = () => {
+        const allSlides = Array.from(this.host.querySelectorAll(renderer.transformTag('nano-slide')));
         this.slideCount = allSlides.length;
         let toLoadSlides = allSlides.filter((ele) => !ele.ready);
         if (!toLoadSlides.length)
@@ -2935,13 +2936,13 @@ const Slides = class {
                 toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
                 if (!toLoadSlides.length) {
                     resolve(allSlides);
-                    host.removeEventListener('nanoSlideReady', slideResolver);
-                    host.removeEventListener('nano-slide-ready', slideResolver);
+                    this.host.removeEventListener('nanoSlideReady', slideResolver);
+                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                 }
             };
-            host.addEventListener('nanoSlideReady', slideResolver);
+            this.host.addEventListener('nanoSlideReady', slideResolver);
             // fallback for vue who can't handle camelcase event names
-            host.addEventListener('nano-slide-ready', slideResolver);
+            this.host.addEventListener('nano-slide-ready', slideResolver);
         });
     };
     componentDidLoad() {
@@ -2950,27 +2951,8 @@ const Slides = class {
             this.didInit = true;
             this.initflickity();
         }
-        if (typeof window !== 'undefined' &&
-            window.MutationObserver) {
-            const mut = (this.mutationO = new MutationObserver((e) => {
-                if (e[0].addedNodes[0] &&
-                    e[0].addedNodes[0].nodeName.toLowerCase() ===
-                        renderer.transformTag('nano-slide') &&
-                    this.flickityReady) {
-                    this.update();
-                }
-            }));
-            mut.observe(this.host, {
-                childList: true,
-                subtree: true,
-            });
-        }
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
         if (this.resizeO) {
             this.resizeO.disconnect();
             this.resizeO = undefined;
@@ -2978,15 +2960,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, renderer.h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
+        return (renderer.h(index.Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, renderer.h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', 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: 'ddcdf042f8d25069c08578e7417e3f5571386b76' })), renderer.h("div", { key: '5a456eee7631c979fef473352d2c4beec7a5cf2e', class: "ui-extras" }, renderer.h("slot", { key: '3994bac2fd8111223df9e3886481edf72b0f2d54', name: "ui" })), this.slideCount > 1 && this.pager && (renderer.h("div", { key: '2966cef941d7232110ba4dbba0aefdb33e757216', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (renderer.h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, renderer.h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), renderer.h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, renderer.h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (renderer.h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (renderer.h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-lMA8e6L6.js');
+var nanoSlides_entry = require('./nano-slides-DFBGKfHj.js');
 require('./index-DGttnXif.js');
 require('./renderer-jVpDRMfV.js');
 

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

@@ -228,10 +228,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
+        return (renderer.h(index.Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '28386faf317ffb158e7c743a9891c07d1843bcaf', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: 'b3c3169a26443abbc19761df5bd543edafae52f2', class: "nano-table__overflow" }))), renderer.h("slot", { key: 'a2ced54f3b39798c78a06fded180291111dfd1b1' })));
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), renderer.h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "references": {
                         "Breadcrumb": {
                             "location": "local",
-                            "path": "/builds/8qhywLzS/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/vSRqAuzi/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

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

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, Build, readTask, writeTask, } from "@stencil/core";
+import { Host, readTask, writeTask, } from "@stencil/core";
 import { transformTag, h } from "../../utils/renderer";
 import { flickity } from "./lib/js";
 const modulo = (num, div) => {
@@ -32,7 +32,6 @@ const modulo = (num, div) => {
 export class Slides {
     flickityEl;
     flickityReady = false;
-    mutationO;
     resizeO;
     readyflickity;
     flickity = new Promise((resolve) => {
@@ -96,7 +95,7 @@ export class Slides {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -186,9 +185,11 @@ export class Slides {
      * child slides.
      */
     async update() {
+        if (!this.didInit)
+            return;
         const [flickity] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -376,7 +377,7 @@ export class Slides {
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await this.waitForSlides(this.host);
+        await this.waitForSlides();
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -466,8 +467,8 @@ export class Slides {
         // @ts-expect-error - merged options don't quite match the flickity options
         return { ...flickityOptions, ...mergedEventOptions, ...this.options };
     }
-    waitForSlides = (host) => {
-        const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
+    waitForSlides = () => {
+        const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
         this.slideCount = allSlides.length;
         let toLoadSlides = allSlides.filter((ele) => !ele.ready);
         if (!toLoadSlides.length)
@@ -477,13 +478,13 @@ export class Slides {
                 toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
                 if (!toLoadSlides.length) {
                     resolve(allSlides);
-                    host.removeEventListener('nanoSlideReady', slideResolver);
-                    host.removeEventListener('nano-slide-ready', slideResolver);
+                    this.host.removeEventListener('nanoSlideReady', slideResolver);
+                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                 }
             };
-            host.addEventListener('nanoSlideReady', slideResolver);
+            this.host.addEventListener('nanoSlideReady', slideResolver);
             // fallback for vue who can't handle camelcase event names
-            host.addEventListener('nano-slide-ready', slideResolver);
+            this.host.addEventListener('nano-slide-ready', slideResolver);
         });
     };
     componentDidLoad() {
@@ -492,28 +493,8 @@ export class Slides {
             this.didInit = true;
             this.initflickity();
         }
-        if (Build.isBrowser &&
-            typeof window !== 'undefined' &&
-            window.MutationObserver) {
-            const mut = (this.mutationO = new MutationObserver((e) => {
-                if (e[0].addedNodes[0] &&
-                    e[0].addedNodes[0].nodeName.toLowerCase() ===
-                        transformTag('nano-slide') &&
-                    this.flickityReady) {
-                    this.update();
-                }
-            }));
-            mut.observe(this.host, {
-                childList: true,
-                subtree: true,
-            });
-        }
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
         if (this.resizeO) {
             this.resizeO.disconnect();
             this.resizeO = undefined;
@@ -521,15 +502,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
+        return (h(Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'ddcdf042f8d25069c08578e7417e3f5571386b76' })), h("div", { key: '5a456eee7631c979fef473352d2c4beec7a5cf2e', class: "ui-extras" }, h("slot", { key: '3994bac2fd8111223df9e3886481edf72b0f2d54', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '2966cef941d7232110ba4dbba0aefdb33e757216', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),

package/dist/collection/components/table/table.js

@@ -213,7 +213,7 @@ export class NanoTable {
         this.handleHideCaptionChange();
     }
     componentDidRender() {
-        if (this.scrollable !== false && this.table) {
+        if (Build.isBrowser && this.scrollable !== false && this.table) {
             // a hack. Revise in-future.
             // the table is always rendered in the light DOM - so it should always be visible, but
             // if we conditionally render the slot within the masked overflow there's quite a noticeable
@@ -231,10 +231,10 @@ export class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
+        return (h(Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '28386faf317ffb158e7c743a9891c07d1843bcaf', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'b3c3169a26443abbc19761df5bd543edafae52f2', class: "nano-table__overflow" }))), h("slot", { key: 'a2ced54f3b39798c78a06fded180291111dfd1b1' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
     }
     static get is() { return "nano-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/nano-table.js

@@ -215,7 +215,7 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.handleHideCaptionChange();
     }
     componentDidRender() {
-        if (this.scrollable !== false && this.table) {
+        if (Build.isBrowser && this.scrollable !== false && this.table) {
             // a hack. Revise in-future.
             // the table is always rendered in the light DOM - so it should always be visible, but
             // if we conditionally render the slot within the masked overflow there's quite a noticeable
@@ -233,10 +233,10 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
+        return (h(Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '28386faf317ffb158e7c743a9891c07d1843bcaf', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'b3c3169a26443abbc19761df5bd543edafae52f2', class: "nano-table__overflow" }))), h("slot", { key: 'a2ced54f3b39798c78a06fded180291111dfd1b1' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/components/slides.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, readTask, writeTask, Build, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, readTask, writeTask, Host } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
 
 function EvEmitter() { }
@@ -2490,7 +2490,6 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
     }
     flickityEl;
     flickityReady = false;
-    mutationO;
     resizeO;
     readyflickity;
     flickity = new Promise((resolve) => {
@@ -2554,7 +2553,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -2644,9 +2643,11 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
      * child slides.
      */
     async update() {
+        if (!this.didInit)
+            return;
         const [flickity] = await Promise.all([
             this.getflickity(),
-            this.waitForSlides(this.host),
+            this.waitForSlides(),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -2834,7 +2835,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await this.waitForSlides(this.host);
+        await this.waitForSlides();
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -2924,8 +2925,8 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         // @ts-expect-error - merged options don't quite match the flickity options
         return { ...flickityOptions, ...mergedEventOptions, ...this.options };
     }
-    waitForSlides = (host) => {
-        const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
+    waitForSlides = () => {
+        const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
         this.slideCount = allSlides.length;
         let toLoadSlides = allSlides.filter((ele) => !ele.ready);
         if (!toLoadSlides.length)
@@ -2935,13 +2936,13 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
                 toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
                 if (!toLoadSlides.length) {
                     resolve(allSlides);
-                    host.removeEventListener('nanoSlideReady', slideResolver);
-                    host.removeEventListener('nano-slide-ready', slideResolver);
+                    this.host.removeEventListener('nanoSlideReady', slideResolver);
+                    this.host.removeEventListener('nano-slide-ready', slideResolver);
                 }
             };
-            host.addEventListener('nanoSlideReady', slideResolver);
+            this.host.addEventListener('nanoSlideReady', slideResolver);
             // fallback for vue who can't handle camelcase event names
-            host.addEventListener('nano-slide-ready', slideResolver);
+            this.host.addEventListener('nano-slide-ready', slideResolver);
         });
     };
     componentDidLoad() {
@@ -2950,28 +2951,8 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
             this.didInit = true;
             this.initflickity();
         }
-        if (Build.isBrowser &&
-            typeof window !== 'undefined' &&
-            window.MutationObserver) {
-            const mut = (this.mutationO = new MutationObserver((e) => {
-                if (e[0].addedNodes[0] &&
-                    e[0].addedNodes[0].nodeName.toLowerCase() ===
-                        transformTag('nano-slide') &&
-                    this.flickityReady) {
-                    this.update();
-                }
-            }));
-            mut.observe(this.host, {
-                childList: true,
-                subtree: true,
-            });
-        }
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
         if (this.resizeO) {
             this.resizeO.disconnect();
             this.resizeO = undefined;
@@ -2979,15 +2960,15 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
+        return (h(Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'ddcdf042f8d25069c08578e7417e3f5571386b76' })), h("div", { key: '5a456eee7631c979fef473352d2c4beec7a5cf2e', class: "ui-extras" }, h("slot", { key: '3994bac2fd8111223df9e3886481edf72b0f2d54', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '2966cef941d7232110ba4dbba0aefdb33e757216', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),

package/dist/esm/{fade-Brdw1NLw.js → fade-OXhXz-Sa.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DKkSSmWQ.js';
+import { F as Flickity, u as utils } from './nano-slides-Dtmc0c07.js';
 import './index-BM3Om9WE.js';
 import './renderer-DpNDfhNy.js';
 

package/dist/esm/{fullscreen-DeZTkFNA.js → fullscreen-CsGitfqH.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-DKkSSmWQ.js';
+import { F as Flickity } from './nano-slides-Dtmc0c07.js';
 import './index-BM3Om9WE.js';
 import './renderer-DpNDfhNy.js';
 

package/dist/esm/{lazyload-D68gi5uV.js → lazyload-DuEV3IVe.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DKkSSmWQ.js';
+import { F as Flickity, u as utils } from './nano-slides-Dtmc0c07.js';
 import './index-BM3Om9WE.js';
 import './renderer-DpNDfhNy.js';