@nanoporetech-digital/components 8.12.0 → 8.12.2

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

@@ -42,11 +42,11 @@ export class Slides {
     childrenEles;
     hasFullScreenModule = false;
     hasLazyLoadModule = false;
-    hasDotsModule = false;
     hasFadeModule = false;
     iCurrentSlide;
     slidesReady;
     didInit = false;
+    slideCount = 0;
     host;
     /**
      * Options to pass to the flickity instance.
@@ -96,7 +96,7 @@ export class Slides {
     async animationChange(_, oldAnim) {
         const [flkty, slides] = await Promise.all([
             this.getflickity(),
-            waitForSlides(this.host),
+            this.waitForSlides(this.host),
         ]);
         // clear old stuff
         slides.forEach((slide) => {
@@ -188,7 +188,7 @@ export class Slides {
     async update() {
         const [flickity] = await Promise.all([
             this.getflickity(),
-            waitForSlides(this.host),
+            this.waitForSlides(this.host),
         ]);
         this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
@@ -324,6 +324,12 @@ export class Slides {
             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);
@@ -361,10 +367,6 @@ export class Slides {
             await import('./lib/js/lazyload');
             this.hasLazyLoadModule = true;
         }
-        if (!this.hasDotsModule && opts.pageDots) {
-            await import('./lib/js/page-dots');
-            this.hasDotsModule = true;
-        }
         if (!this.hasFadeModule && opts.fade) {
             await import('./lib/js/fade');
             this.hasFadeModule = true;
@@ -374,7 +376,7 @@ export class Slides {
         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)
@@ -426,7 +428,6 @@ export class Slides {
             fullscreen: this.fullscreen,
             accessibility: true,
             imagesLoaded: true,
-            pageDots: this.pager,
         };
         if (this.animation === 'fade') {
             flickityOptions.fade = true;
@@ -465,7 +466,32 @@ 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')));
+        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 (Build.isBrowser &&
             typeof window !== 'undefined' &&
             window.MutationObserver) {
@@ -483,13 +509,6 @@ export class Slides {
             });
         }
     }
-    componentWillLoad() {
-        this.nanoSlidesDidLoad.emit();
-        if (!this.didInit) {
-            this.didInit = true;
-            this.initflickity();
-        }
-    }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
@@ -502,15 +521,24 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '3a10721073af3ef6658047ba47aef766698df2c1', class: "nano-slides" }, h("div", { key: '2603091b764a61836422c2b1edacfa99f2275533', class: {
+        return (h(Host, { key: '6dedc1589f5ae629975f38303f658de914c8f506', class: "nano-slides" }, h("div", { key: '528c7b10972b258ef0345525a9fa82c289ecc083', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'a7c997143a864dd9d458deed4ea8034701c4e270', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, 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" }, h("slot", { key: '366fbe336c1f7a77781327d4b887da201a59c732' })), h("div", { key: 'e2d9004f2e5e4e95d98275f80d63073d7ea2518b', class: "ui-extras" }, h("slot", { key: '0e88f115692ab91d33040f4ee03422f99ac10771', name: "ui" })))));
+            }, 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: {
+                '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);
+            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }
@@ -726,7 +754,8 @@ export class Slides {
         return {
             "iCurrentSlide": {},
             "slidesReady": {},
-            "didInit": {}
+            "didInit": {},
+            "slideCount": {}
         };
     }
     static get events() {
@@ -1254,22 +1283,3 @@ export class Slides {
             }];
     }
 }
-const waitForSlides = (host) => {
-    const allSlides = Array.from(host.querySelectorAll(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);
-    });
-};

package/dist/collection/components/sortable/sortable.js

@@ -732,7 +732,7 @@ export class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: '290c407551a2742f1aea13b69bf6e76783ac04cf', class: "nano-sortable" }, 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) => (h("div", null, str)))), h("slot", { key: '9c7984602c800c36731218593811876aac6ed948' })));
+        return (h(Host, { key: '8417261830f3b91247c7b7a6c6b75b348dc19bfb', class: "nano-sortable" }, 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) => (h("div", null, str)))), h("slot", { key: '94e4576b27bb98af4375b855a5d440dcb9d06667' })));
     }
     static get is() { return "nano-sortable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/step-accordion/step-accordion.js

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

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

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

@@ -603,12 +603,12 @@ export class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(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" }, h("div", { key: 'a0825842c7fb6fd7ab7e15a6775547693e38c1cb', class: {
+        return (h(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" }, 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) }, h("div", { key: '3693b4a7c4daf5b5208b36a158b0d0b1f3ced9b0', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '526f2d5e88882133ec67866d90cdf18b95ce86cc' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'e9e2e931b30f6c1b3278ee96d132c40772b35f8a', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '7724a7b761972a7499945135e184a52f11811c9c' })))));
     }
     static get is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -231,10 +231,10 @@ export class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'e2ee468673f70252fc559a82e48b74f12273e416', class: {
+        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '63091df4a07695276d762d2a5ad5f535c9ed67dd', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '2defbb73d6077d95351c50685c70e6c32f05fd87', class: "nano-table__overflow" }))), h("slot", { key: '71a9d57114363f976eb139d494a8383795a67a8b' })));
+            } }, 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' })));
     }
     static get is() { return "nano-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tab-content.js

@@ -24,10 +24,10 @@ export class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(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 (h(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,
-            } }, h("div", { key: '68d1c780cf1f6d4d0ef77b1dafa7766aa08ba52b', part: "base", class: "nano-tab-content" }, h("slot", { key: 'd8be1c667173f69f74fbead600d79bf96da42cbe' }))));
+            } }, h("div", { key: '38103778c1cdc28329d46f8709c1258430c0d1d3', part: "base", class: "nano-tab-content" }, h("slot", { key: '4fd7291a060d0e9a8a538e3df70cc1eb3c7cc25a' }))));
     }
     static get is() { return "nano-tab-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,12 +56,12 @@ export class NanoTab {
     };
     render() {
         const Tag = this.href ? 'a' : 'div';
-        return (h(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" }, h(Tag, { key: '6abd3439ce894ba2ca18087046346e9642c213ae', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(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" }, 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 }, h("slot", { key: 'b4e779982bce5a76fdb31835d7ff94f4234d522d', name: "start" }), h("div", { key: 'b4e271107a4a4f49fd97843afbf6c217b312c498', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: 'ca2f8f7f9173a8fa4d2d803252790ba34e1c2130' })), h("slot", { key: 'a9a5784d19f896b46da0e7fe8df118664564fd07', name: "end" }), this.closable && !this.disabled && (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 }, h("slot", { key: '0477ea2cd084a6bb7dcb657d677cc144d7b7f382', name: "start" }), h("div", { key: 'd9008020efe31daba60e0e5686d3dd705b459ae1', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: 'afb668fab779adcdf990173b904360ac6cb7b420' })), h("slot", { key: '2d80bad66affc2034dfc9dca90b70bfc392e7e60', name: "end" }), this.closable && !this.disabled && (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" })))));
     }
     static get is() { return "nano-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -227,10 +227,10 @@ export class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '4e1a851a25fb3b85f17ce51e6d3ca6c4ef88096b', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '040fd84cf165db44447013c4f830c127f9c3cffa', onSlotchange: this.handleSlotChange }), h("div", { key: 'ce342385aa99cb783ee5438812eba7eb6d52993a', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '37c9a935a2e9b9d1970a1bf4269aea5fd959176b', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '47db0fb2f9706960aea19d4b6896c680983ed434', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '454f02a3cbe81b2b76a93c38f4f750802adaf0fc', onSlotchange: this.handleSlotChange }), h("div", { key: '2a17c5c7020ec2d699baf993f68b3ee4387f9541', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'e3caece4446b7c79a9a935b818dbe3eed4fdfa37', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '2131e35600ffcf0bf1531f84a2dbc0d954083ab8', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '98953a383fbc4f68c96015e1e44a5618fb6efb97', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: 'fe8c00239fca802a242c7d5a25001471ad2f9080', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '79d9ad01f482731e6995a400b251c45faa5db935', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get is() { return "nano-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/nano-card-carousel.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/cl
 import { h } from './renderer.js';
 import { d as defineCustomElement$2 } from './slides.js';
 
-const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: calc(50% + var(--gap) / 2 - var(--peek));\n  padding-inline-end: var(--gap);\n}\n.base nano-slides[ready]::part(slide-container) {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n  transform: none;\n  block-size: 100%;\n  inline-size: var(--bleed);\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  text-wrap: balance;\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n.base nano-slides {\n  overflow: visible;\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n  }\n  .base ::slotted(nano-slide), .base::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n    inline-size: calc(100% + var(--gap) - var(--peek));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
+const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n  overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: var(--slide-width);\n  padding-inline-end: var(--gap);\n}\n.base nano-slides {\n  overflow: visible;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n  -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%);\n          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%);\n}\n.base nano-slides[ready]::part(slide-container) {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n  transform: none;\n  block-size: 100%;\n  inline-size: calc(var(--peek) + var(--gap));\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  text-wrap: balance;\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n    --slide-width: calc((100% + var(--gap)) - var(--peek));\n  }\n  .base ::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
 
 const ContentCarousel = /*@__PURE__*/ proxyCustomElement(class ContentCarousel extends HTMLElement {
     constructor() {

package/dist/components/nano-global-nav.js

@@ -25,7 +25,7 @@ import { d as defineCustomElement$4 } from './sticker.js';
 import { d as defineCustomElement$3 } from './tag.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const globalNavCss = ":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{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
+const globalNavCss = ":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{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
 
 const MIN_SEARCH_LENGTH = 3;
 const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLElement {

package/dist/components/nano-sortable.js

@@ -730,7 +730,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '290c407551a2742f1aea13b69bf6e76783ac04cf', class: "nano-sortable" }, 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) => (h("div", null, str)))), h("slot", { key: '9c7984602c800c36731218593811876aac6ed948' })));
+        return (h(Host, { key: '8417261830f3b91247c7b7a6c6b75b348dc19bfb', class: "nano-sortable" }, 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) => (h("div", null, str)))), h("slot", { key: '94e4576b27bb98af4375b855a5d440dcb9d06667' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],

package/dist/components/nano-step-accordion.js

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

package/dist/components/nano-step-breadcrumb.js

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

@@ -24,10 +24,10 @@ const NanoTabContent$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabContent e
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(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 (h(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,
-            } }, h("div", { key: '68d1c780cf1f6d4d0ef77b1dafa7766aa08ba52b', part: "base", class: "nano-tab-content" }, h("slot", { key: 'd8be1c667173f69f74fbead600d79bf96da42cbe' }))));
+            } }, h("div", { key: '38103778c1cdc28329d46f8709c1258430c0d1d3', part: "base", class: "nano-tab-content" }, h("slot", { key: '4fd7291a060d0e9a8a538e3df70cc1eb3c7cc25a' }))));
     }
     static get style() { return tabContentCss; }
 }, [257, "nano-tab-content", {

package/dist/components/nano-tab.js

@@ -54,12 +54,12 @@ const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLEle
     };
     render() {
         const Tag = this.href ? 'a' : 'div';
-        return (h(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" }, h(Tag, { key: '6abd3439ce894ba2ca18087046346e9642c213ae', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(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" }, 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 }, h("slot", { key: 'b4e779982bce5a76fdb31835d7ff94f4234d522d', name: "start" }), h("div", { key: 'b4e271107a4a4f49fd97843afbf6c217b312c498', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: 'ca2f8f7f9173a8fa4d2d803252790ba34e1c2130' })), h("slot", { key: 'a9a5784d19f896b46da0e7fe8df118664564fd07', name: "end" }), this.closable && !this.disabled && (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 }, h("slot", { key: '0477ea2cd084a6bb7dcb657d677cc144d7b7f382', name: "start" }), h("div", { key: 'd9008020efe31daba60e0e5686d3dd705b459ae1', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: 'afb668fab779adcdf990173b904360ac6cb7b420' })), h("slot", { key: '2d80bad66affc2034dfc9dca90b70bfc392e7e60', name: "end" }), this.closable && !this.disabled && (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" })))));
     }
     static get style() { return tabCss; }
 }, [257, "nano-tab", {

package/dist/components/nano-table.js

@@ -233,10 +233,10 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'e2ee468673f70252fc559a82e48b74f12273e416', class: {
+        return (h(Host, { key: '54758d3dbda3695305222d5717ad0503d355dc42', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '63091df4a07695276d762d2a5ad5f535c9ed67dd', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '2defbb73d6077d95351c50685c70e6c32f05fd87', class: "nano-table__overflow" }))), h("slot", { key: '71a9d57114363f976eb139d494a8383795a67a8b' })));
+            } }, 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' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],