@nanoporetech-digital/components 8.12.0 → 8.12.1

package/dist/cjs/{nano-slides-C2K7j1yc.js → nano-slides-CXg2hNth.js}

@@ -87,7 +87,7 @@ proto$4.allOff = function () {
 function getStyleSize(value) {
     const num = parseFloat(value);
     // not a percent like '100%', and a number
-    const isValid = value.indexOf('%') == -1 && !isNaN(num);
+    const isValid = value?.indexOf('%') == -1 && !isNaN(num);
     return isValid && num;
 }
 function noop$1() { }
@@ -734,7 +734,7 @@ proto._create = function () {
     // create viewport & slider
     this.viewport = document.createElement('div');
     this.viewport.className = 'flickity-viewport';
-    this.viewport.part.add('slide-viewport');
+    this.viewport.setAttribute('part', 'slide-viewport');
     this._createSlider();
     if (this.options.resize || this.options.watchCSS) {
         window.addEventListener('resize', this);
@@ -2213,14 +2213,13 @@ var nowNext = () => {
         this.isLeft = this.direction == leftDirection;
         const button = (this.element = document.createElement('button'));
         button.className = 'flickity-button flickity-prev-next-button';
-        button.part.add('navigation-button');
         if (this.isPrevious) {
             button.classList.add('previous');
-            button.part.add('navigation-button--previous');
+            button.setAttribute('part', 'navigation-button navigation-button--previous');
         }
         else {
             button.classList.add('next');
-            button.part.add('navigation-button--next');
+            button.setAttribute('part', 'navigation-button navigation-button--next');
         }
         // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
         button.setAttribute('type', 'button');
@@ -2240,7 +2239,7 @@ var nowNext = () => {
         icon.className =
             'button-icon ' +
                 (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
-        icon.part.add('navigation-icon');
+        icon.setAttribute('part', 'navigation-icon');
         slot.appendChild(icon);
         // events
         this.parent.on('select', this.update.bind(this));
@@ -2469,7 +2468,7 @@ drag();
 nowNext();
 player();
 
-const slidesCss = ":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{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--navbtns-width:1.875rem;--navbtns-height:2.75rem;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;--flip-icon-ltr:0;--flip-icon-rtl:1;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host:dir(rtl){--flip-icon-ltr:1;--flip-icon-rtl:0}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;max-block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.button-icon{display:block}.button-icon::after{content:\"\";display:block;background-size:cover;inline-size:var(--navbtns-width);block-size:var(--navbtns-height);background-color:var(--navbtns-icon-color);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);transition:color var(--nano-transition-fast) ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg * var(--flip-icon-ltr));-webkit-mask-size:cover;mask-size:cover}.button-icon--previous::after{rotate:calc(180deg * var(--flip-icon-rtl))}.flickity-button:disabled .button-icon::after{background-color:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;inset-block-end:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentcolor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":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{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--navbtns-width:1.875rem;--navbtns-height:2.75rem;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;--flip-icon-ltr:0;--flip-icon-rtl:1;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host:dir(rtl){--flip-icon-ltr:1;--flip-icon-rtl:0}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.button-icon{display:block}.button-icon::after{content:\"\";display:block;background-size:cover;inline-size:var(--navbtns-width);block-size:var(--navbtns-height);background-color:var(--navbtns-icon-color);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);transition:color var(--nano-transition-fast) ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg * var(--flip-icon-ltr));-webkit-mask-size:cover;mask-size:cover}.button-icon--previous::after{rotate:calc(180deg * var(--flip-icon-rtl))}.flickity-button:disabled .button-icon::after{background-color:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;inset-block-end:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentcolor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 
 const modulo = (num, div) => {
     return ((num % div) + div) % div;
@@ -2501,11 +2500,11 @@ const Slides = class {
     childrenEles;
     hasFullScreenModule = false;
     hasLazyLoadModule = false;
-    hasDotsModule = false;
     hasFadeModule = false;
     iCurrentSlide;
     slidesReady;
     didInit = false;
+    slideCount = 0;
     get host() { return index.getElement(this); }
     /**
      * Options to pass to the flickity instance.
@@ -2555,7 +2554,7 @@ const Slides = class {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            waitForSlides(this.host),
+            this.waitForSlides(this.host),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -2647,7 +2646,7 @@ const Slides = class {
     async update() {
         const [flickity] = await Promise.all([
             this.getflickity(),
-            waitForSlides(this.host),
+            this.waitForSlides(this.host),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${renderer.transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -2783,6 +2782,12 @@ const Slides = class {
             cell.element.style.setProperty('--animation-amount', animAmount.toString());
         });
     };
+    isActive(num) {
+        if (num === this.currentSlide) {
+            return true;
+        }
+        return false;
+    }
     handleFullscreen = (isFullScreen) => {
         this.fullscreen = isFullScreen;
         this.nanoSlidesFullscreenChange.emit(isFullScreen);
@@ -2813,19 +2818,15 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-Bzjv2HGI.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-DRJ-K03z.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-BNO_n6W8.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-CQY_vK8q.js'); });
             this.hasLazyLoadModule = true;
         }
-        if (!this.hasDotsModule && opts.pageDots) {
-            await Promise.resolve().then(function () { return require('./page-dots-Db7Ce8kX.js'); });
-            this.hasDotsModule = true;
-        }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-CPjR03EH.js'); });
+            await Promise.resolve().then(function () { return require('./fade-B_RYQMUR.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2833,7 +2834,7 @@ const Slides = class {
         const finalOptions = this.normalizeOptions();
         await this.loadFlickityModules(finalOptions);
         // init flickity core
-        await waitForSlides(this.host);
+        await this.waitForSlides(this.host);
         this.flickityEl =
             this.flickityEl || this._getRoot().querySelector('.flickity-container');
         if (!this.flickityEl)
@@ -2885,7 +2886,6 @@ const Slides = class {
             fullscreen: this.fullscreen,
             accessibility: true,
             imagesLoaded: true,
-            pageDots: this.pager,
         };
         if (this.animation === 'fade') {
             flickityOptions.fade = true;
@@ -2924,7 +2924,32 @@ 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')));
+        this.slideCount = allSlides.length;
+        let toLoadSlides = allSlides.filter((ele) => !ele.ready);
+        if (!toLoadSlides.length)
+            return Promise.resolve(allSlides);
+        return new Promise((resolve) => {
+            const slideResolver = (ev) => {
+                toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
+                if (!toLoadSlides.length) {
+                    resolve(allSlides);
+                    host.removeEventListener('nanoSlideReady', slideResolver);
+                    host.removeEventListener('nano-slide-ready', slideResolver);
+                }
+            };
+            host.addEventListener('nanoSlideReady', slideResolver);
+            // fallback for vue who can't handle camelcase event names
+            host.addEventListener('nano-slide-ready', slideResolver);
+        });
+    };
     componentDidLoad() {
+        this.nanoSlidesDidLoad.emit();
+        if (!this.didInit) {
+            this.didInit = true;
+            this.initflickity();
+        }
         if (typeof window !== 'undefined' &&
             window.MutationObserver) {
             const mut = (this.mutationO = new MutationObserver((e) => {
@@ -2941,13 +2966,6 @@ const Slides = class {
             });
         }
     }
-    componentWillLoad() {
-        this.nanoSlidesDidLoad.emit();
-        if (!this.didInit) {
-            this.didInit = true;
-            this.initflickity();
-        }
-    }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
@@ -2960,15 +2978,24 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: '3a10721073af3ef6658047ba47aef766698df2c1', class: "nano-slides" }, renderer.h("div", { key: '2603091b764a61836422c2b1edacfa99f2275533', class: {
+        return (renderer.h(index.Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, renderer.h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: 'a7c997143a864dd9d458deed4ea8034701c4e270', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: '4d16a4da0692f53500c755600a539edf5dc2d606', 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: '366fbe336c1f7a77781327d4b887da201a59c732' })), renderer.h("div", { key: 'e2d9004f2e5e4e95d98275f80d63073d7ea2518b', class: "ui-extras" }, renderer.h("slot", { key: '0e88f115692ab91d33040f4ee03422f99ac10771', name: "ui" })))));
+            }, 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: {
+                'pagination-btn': true,
+                'pagination-btn--active': this.isActive(index),
+                'is-selected': this.isActive(index),
+                dot: true,
+            }, "aria-current": this.isActive(index) ? 'step' : undefined, onClick: () => {
+                if (this.isActive(index))
+                    return;
+                this.slideTo(index);
+            } }, renderer.h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -2982,28 +3009,8 @@ const Slides = class {
         "autoplay": ["autoPlayChange"]
     }; }
 };
-const waitForSlides = (host) => {
-    const allSlides = Array.from(host.querySelectorAll(renderer.transformTag('nano-slide')));
-    let toLoadSlides = allSlides.filter((ele) => !ele.ready);
-    if (!toLoadSlides.length)
-        return Promise.resolve(allSlides);
-    return new Promise((resolve) => {
-        const slideResolver = (ev) => {
-            toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
-            if (!toLoadSlides.length) {
-                resolve(allSlides);
-                host.removeEventListener('nanoSlideReady', slideResolver);
-                host.removeEventListener('nano-slide-ready', slideResolver);
-            }
-        };
-        host.addEventListener('nanoSlideReady', slideResolver);
-        // fallback for vue who can't handle camelcase event names
-        host.addEventListener('nano-slide-ready', slideResolver);
-    });
-};
 Slides.style = slidesCss;
 
 exports.Flickity = Flickity;
 exports.Slides = Slides;
-exports.Unipointer = Unipointer;
 exports.utils = utils;

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

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

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

@@ -728,7 +728,7 @@ const Sortable = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '290c407551a2742f1aea13b69bf6e76783ac04cf', class: "nano-sortable" }, renderer.h("div", { key: '85d9c75f73d2c010bf8a8944855ef4b9af8ca24e', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: '9c7984602c800c36731218593811876aac6ed948' })));
+        return (renderer.h(index.Host, { key: '8417261830f3b91247c7b7a6c6b75b348dc19bfb', class: "nano-sortable" }, renderer.h("div", { key: 'ce86bd07503d4afd4f3927c53df7e271a538755e', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: '94e4576b27bb98af4375b855a5d440dcb9d06667' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],

package/dist/cjs/nano-step-accordion.cjs.entry.js

@@ -83,7 +83,7 @@ const NanoStepAccordion = class {
         }
     }
     render() {
-        return (renderer.h("nano-accordion", { key: '3676ae38e897988059d679e2f3b3291641a4a2b0', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
+        return (renderer.h("nano-accordion", { key: '1832da76f2bff202722bb28c049d75d11149b321', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
                 step: true,
                 'step--active': index$1 === this.activeStep,
                 'step--complete': step.complete,

package/dist/cjs/nano-step-breadcrumb.cjs.entry.js

@@ -106,10 +106,10 @@ const NanoStepBreadcrumb = class {
     };
     render() {
         const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
-        return (renderer.h(index.Host, { key: 'c1b1866d4889830fa70d570df0bea118561df7bf' }, renderer.h(Wrapper, { key: '630fc450433bd177410e4e69730781cec88b0ea5', class: "step-wrapper" }, renderer.h("ul", { key: 'd8b35166bbb9b01df388387997f4b2a4dc612f55', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: 'aa8e3119c641c02f4ac960d4e415c7c327249c8e', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '61172362d21ec93527e431ab96d9f66075aa52dc', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '8edb7e0ddac43cff9b001ba504f003d6df64895f', slot: "trigger", class: "step-trigger" }, renderer.h("div", { key: 'a7ba7d9b0c6724ce19bd556cbfef2fdd9dc36f2b', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+        return (renderer.h(index.Host, { key: 'cbda942c6f8110d4d82131a1c9e4b14edf24b0c3' }, renderer.h(Wrapper, { key: 'b7fb3d26dd43a9407a75051be48e20b7633a8838', class: "step-wrapper" }, renderer.h("ul", { key: 'fbc4be8dea505488507b6ad77b412888e92e1b0a', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: '3303c111f3f5b55afdae780c389dd62f66ab41e5', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '5e53b5c612f04201304b3ad740a87c3b702becae', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '04adf74e007e5de4504a297e65f32a284d3ab086', slot: "trigger", class: "step-trigger" }, renderer.h("div", { key: '0820a4a1bdcb5c7123e266885c7632f2c0b1efa2', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                 '--value': '' + (this.activeStep + 1),
                 '--max': '' + this.steps.length,
-            } }, renderer.h("span", { key: 'd84750e092190edd64cd3cecc7a36e2b8b400fbe', class: "step-progress-text" }, renderer.h("strong", { key: '6b2f3cd970a2e64299c0d9f85ee59cd93a041858' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: '53ebc1b869804b2bae5dc6e9a8cdb2e78027c0c2', class: "step-trigger-text" }, renderer.h("div", { key: 'b419abee3f2fa764f19f9f3910347dac89f7b278', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '6c307ffcd845df90950811e0e88e624ebec495a4', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: '1c012c4bf4e264a328dad23317f73451148176fc', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: 'ef2bac97f59de0f9b63837cb5c0d67958b32d3ce' }, this.steps.map((step, index) => (renderer.h("nano-nav-item", { class: {
+            } }, renderer.h("span", { key: '9548a830bc2c09209276fc8ff3c2c19a9ca9f867', class: "step-progress-text" }, renderer.h("strong", { key: '5b4df74d1ae187cbc221e2b0e3ce2822ffc15dda' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: '5f2188ff4aa1a405517f1916852f90ebd52851de', class: "step-trigger-text" }, renderer.h("div", { key: '0c78fd73afea02abc1b97b86c12568cd9cd722d3', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '39ba2b211cb3500be635661372a12660c6f1dc07', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: 'ed4a5818efd6e7ff4be154b4e7ec230bdf4a6003', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: '64b46fdbc7d6317e4ea0899c51017a3238f154d2' }, this.steps.map((step, index) => (renderer.h("nano-nav-item", { class: {
                 'step-item-mobile': true,
                 'step-item-mobile step-item--active': index === this.activeStep,
                 'step-item-mobile step-item--complete': step.complete,

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

@@ -607,12 +607,12 @@ const Sticker = class {
         this.hasBootstrapped = false;
     }
     render() {
-        return (renderer.h(index.Host, { key: 'f339585bb8f9d509f374404a6462b482ee7f7001', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, renderer.h("div", { key: 'a0825842c7fb6fd7ab7e15a6775547693e38c1cb', class: {
+        return (renderer.h(index.Host, { key: 'a8a1f92fa8f2039b7d69cc147f1f8aad270243f5', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, renderer.h("div", { key: '0197385d3dbbef5b3ca2e25bb8b58eae96ebfd2c', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '3693b4a7c4daf5b5208b36a158b0d0b1f3ced9b0', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: '526f2d5e88882133ec67866d90cdf18b95ce86cc' })))));
+            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: 'e9e2e931b30f6c1b3278ee96d132c40772b35f8a', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: '7724a7b761972a7499945135e184a52f11811c9c' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],

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

@@ -24,10 +24,10 @@ const NanoTabContent = class {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (renderer.h(index.Host, { key: '7899878aa521145bc4fe77a7e81ddbd2d48b739e', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (renderer.h(index.Host, { key: '115f9e8de93aa80ebaf9d965b7142cc0fd415a2d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, renderer.h("div", { key: '68d1c780cf1f6d4d0ef77b1dafa7766aa08ba52b', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: 'd8be1c667173f69f74fbead600d79bf96da42cbe' }))));
+            } }, renderer.h("div", { key: '38103778c1cdc28329d46f8709c1258430c0d1d3', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '4fd7291a060d0e9a8a538e3df70cc1eb3c7cc25a' }))));
     }
 };
 NanoTabContent.style = tabContentCss;

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

@@ -51,12 +51,12 @@ const NanoTab = class {
     };
     render() {
         const Tag = this.href ? 'a' : 'div';
-        return (renderer.h(index.Host, { key: 'a78bb242b893196388ea298631cecba3ac1b3303', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h(Tag, { key: '6abd3439ce894ba2ca18087046346e9642c213ae', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (renderer.h(index.Host, { key: '1d0f5f7cbd4b2ecee010b3a97fc939d10e3cfa1b', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h(Tag, { key: '7a02bafe7fb706f16ce46ec41cc21b2fe5021785', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            }, href: this.href, target: this.target }, renderer.h("slot", { key: 'b4e779982bce5a76fdb31835d7ff94f4234d522d', name: "start" }), renderer.h("div", { key: 'b4e271107a4a4f49fd97843afbf6c217b312c498', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: 'ca2f8f7f9173a8fa4d2d803252790ba34e1c2130' })), renderer.h("slot", { key: 'a9a5784d19f896b46da0e7fe8df118664564fd07', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: 'ee1a92727d890e634b4d42343cc5a73cfd3055b3', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            }, href: this.href, target: this.target }, renderer.h("slot", { key: '0477ea2cd084a6bb7dcb657d677cc144d7b7f382', name: "start" }), renderer.h("div", { key: 'd9008020efe31daba60e0e5686d3dd705b459ae1', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: 'afb668fab779adcdf990173b904360ac6cb7b420' })), renderer.h("slot", { key: '2d80bad66affc2034dfc9dca90b70bfc392e7e60', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '93a8a4df41648e0ddea8131510e07086c252fde9', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
 };
 NanoTab.style = tabCss;

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

@@ -228,10 +228,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'e2ee468673f70252fc559a82e48b74f12273e416', class: {
+        return (renderer.h(index.Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '63091df4a07695276d762d2a5ad5f535c9ed67dd', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '2defbb73d6077d95351c50685c70e6c32f05fd87', class: "nano-table__overflow" }))), renderer.h("slot", { key: '71a9d57114363f976eb139d494a8383795a67a8b' })));
+            } }, 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' })));
     }
     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/x6knoJK1/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/6SyqsxUA/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

package/dist/collection/components/card-carousel/card-carousel.css

@@ -51,10 +51,12 @@
   --pagination-button-hover: var(--nano-color-primary-700);
   --pagination-button-active: var(--nano-color-primary-1000);
   --peek: calc(var(--bleed) / 2);
+  --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));
   display: block;
   position: relative;
   margin-inline: 0 calc(var(--bleed) * -1);
   container-type: inline-size;
+  overflow: hidden;
 }
 
 .base ::slotted(nano-slide), .base::slotted(nano-slide) {
@@ -63,9 +65,16 @@
   display: block;
   text-align: unset;
   min-block-size: auto;
-  inline-size: calc(50% + var(--gap) / 2 - var(--peek));
+  inline-size: var(--slide-width);
   padding-inline-end: var(--gap);
 }
+.base nano-slides {
+  overflow: visible;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);
+          mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);
+}
 .base nano-slides[ready]::part(slide-container) {
   flex-flow: column wrap;
   justify-content: flex-start;
@@ -79,7 +88,7 @@
 .base nano-slides::part(navigation-button--next) {
   transform: none;
   block-size: 100%;
-  inline-size: var(--bleed);
+  inline-size: calc(var(--peek) + var(--gap));
   inset-inline-end: 0;
   inset-block-start: 0;
   border-radius: 0;
@@ -145,18 +154,15 @@
 .base .pagination-btn--active {
   background: var(--pagination-button-active);
 }
-.base nano-slides {
-  overflow: visible;
-}
 @container (width < 615px) {
   .base {
     --gap: var(--nano-spacing-md);
     --peek: var(--bleed);
+    --slide-width: calc((100% + var(--gap)) - var(--peek));
   }
-  .base ::slotted(nano-slide), .base::slotted(nano-slide) {
+  .base ::slotted(nano-slide) {
     --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));
     --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));
-    inline-size: calc(100% + var(--gap) - var(--peek));
   }
   .base .header {
     flex-direction: column;

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

@@ -82,7 +82,7 @@ proto._create = function () {
     // create viewport & slider
     this.viewport = document.createElement('div');
     this.viewport.className = 'flickity-viewport';
-    this.viewport.part.add('slide-viewport');
+    this.viewport.setAttribute('part', 'slide-viewport');
     this._createSlider();
     if (this.options.resize || this.options.watchCSS) {
         window.addEventListener('resize', this);

package/dist/collection/components/slides/lib/js/prev-next-button.js

@@ -21,14 +21,13 @@ export default () => {
         this.isLeft = this.direction == leftDirection;
         const button = (this.element = document.createElement('button'));
         button.className = 'flickity-button flickity-prev-next-button';
-        button.part.add('navigation-button');
         if (this.isPrevious) {
             button.classList.add('previous');
-            button.part.add('navigation-button--previous');
+            button.setAttribute('part', 'navigation-button navigation-button--previous');
         }
         else {
             button.classList.add('next');
-            button.part.add('navigation-button--next');
+            button.setAttribute('part', 'navigation-button navigation-button--next');
         }
         // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
         button.setAttribute('type', 'button');
@@ -48,7 +47,7 @@ export default () => {
         icon.className =
             'button-icon ' +
                 (this.isPrevious ? 'button-icon--previous' : 'button-icon--next');
-        icon.part.add('navigation-icon');
+        icon.setAttribute('part', 'navigation-icon');
         slot.appendChild(icon);
         // events
         this.parent.on('select', this.update.bind(this));

package/dist/collection/components/slides/lib/js/utils/get-size.js

@@ -10,7 +10,7 @@
 function getStyleSize(value) {
     const num = parseFloat(value);
     // not a percent like '100%', and a number
-    const isValid = value.indexOf('%') == -1 && !isNaN(num);
+    const isValid = value?.indexOf('%') == -1 && !isNaN(num);
     return isValid && num;
 }
 function noop() { }

package/dist/collection/components/slides/slides.css

@@ -88,7 +88,6 @@
 }
 .slideshow.not-ready {
   inline-size: 100%;
-  max-block-size: 300px;
   overflow: hidden;
 }
 
@@ -96,7 +95,6 @@
   opacity: 0;
   transition: opacity 0.2s;
   display: flex;
-  inline-size: fit-content;
   block-size: fit-content;
 }
 .not-ready .flickity-container {