@nanoporetech-digital/components 9.0.0 → 9.1.0

package/dist/cjs/nano-nav-item.cjs.entry.js

@@ -3,85 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var dom = require('./dom-Dxk5vXYq.js');
-var tabbable = require('./tabbable-C-YwPfjA.js');
-var renderer = require('./renderer-jVpDRMfV.js');
-var slot = require('./slot-CfuOT0U4.js');
+var index = require('./index-C7Ikbhe3.js');
+var dom = require('./dom-CIEcUG2R.js');
+var tabbable = require('./tabbable-BXxsn02Z.js');
+var renderer = require('./renderer-bX7EsIYR.js');
+var slot = require('./slot-BRAzxuj_.js');
 var activeElement = require('./active-element-Vtuxns0n.js');
 
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
-
- * @param el element
- * @returns a promise that resolves when the transition is done
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- *
- * @param el
- * @param options
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, options) => {
-    const opts = {
-        className: '',
-        show: true,
-        showDisplay: 'block',
-        showProp: 'classList',
-        timeout: 1000,
-        ...options,
-    };
-    return new Promise((resolve) => {
-        const showCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.dataset.displayTransition = 'true';
-                el.removeEventListener('transitionend', showCb);
-                resolve('shown');
-            }
-        };
-        const hideCb = (e) => {
-            if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-                (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                el.style.display = 'none';
-                el.dataset.displayTransition = 'false';
-                el.removeEventListener('transitionend', hideCb);
-                resolve('hidden');
-            }
-        };
-        if (opts.show) {
-            el.addEventListener('transitionend', showCb);
-            el.style.display = opts.showDisplay;
-            setTimeout(() => el[opts.showProp].add(opts.className), 50);
-        }
-        else {
-            el.addEventListener('transitionend', hideCb);
-            el[opts.showProp].remove(opts.className);
-        }
-        // If no transition, resolve after timeout
-        if (opts.timeout) {
-            setTimeout(() => {
-                if (opts.show && el.dataset.displayTransition !== 'true') {
-                    el.dataset.displayTransition = 'true';
-                    el.removeEventListener('transitionend', showCb);
-                    resolve('shown');
-                }
-                else if (!opts.show && el.dataset.displayTransition !== 'false') {
-                    el.style.display = 'none';
-                    el.dataset.displayTransition = 'false';
-                    el.removeEventListener('transitionend', hideCb);
-                    resolve('hidden');
-                }
-            }, opts.timeout);
-        }
-    });
-};
-
 const navItemCss = ":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{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";
 
 const NavItem = class {
@@ -95,6 +23,11 @@ const NavItem = class {
     secondaryDiv;
     slotCtrl = new slot.HasSlotController(this, 'secondary', 'close-button');
     controlElement;
+    hoverTimer = -1;
+    openedByTouch = false;
+    openedByClick = false;
+    canHover = false;
+    transitionAbort = null;
     get host() { return index.getElement(this); }
     didOpen = false;
     isInMenuDrawer = false;
@@ -112,6 +45,17 @@ const NavItem = class {
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
+    /** Open the secondary panel on hover (fine pointer / non-touch devices only) */
+    openOnHover = false;
+    openOnHoverChanged() {
+        this.canHover =
+            this.openOnHover &&
+                window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+        if (!this.canHover)
+            this.removeHoverListeners();
+        else
+            this.addHoverListeners();
+    }
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -170,34 +114,109 @@ const NavItem = class {
         if (!this.didOpen || !this.slotCtrl.has('secondary') || !this.closeOnBlur)
             return;
         if (e.key && e.key === 'Escape') {
+            this.openedByClick = false;
             this.closeSecondary();
             return;
         }
-        if (!e.composedPath().some((el) => el === this.secondaryDiv)) {
+        const path = e.composedPath();
+        // if click-locked, ignore clicks within the host (trigger or panel)
+        if (this.openedByClick && path.some((el) => el === this.host))
+            return;
+        if (!path.some((el) => el === this.secondaryDiv)) {
             this.closeSecondary();
         }
     }
+    addHoverListeners() {
+        this.host.addEventListener('pointerenter', this.handlePointerEnter);
+        this.host.addEventListener('pointerleave', this.handlePointerLeave);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+    }
+    removeHoverListeners() {
+        this.host.removeEventListener('pointerenter', this.handlePointerEnter);
+        this.host.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+    }
+    handlePointerEnter = (e) => {
+        if (!this.canHover || !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse') {
+            this.openedByTouch = true;
+            return;
+        }
+        this.openedByTouch = false;
+        window.clearTimeout(this.hoverTimer);
+        // if click-locked open, don't start a re-open timer
+        if (this.openedByClick && this.didOpen)
+            return;
+        this.hoverTimer = window.setTimeout(() => this.openSecondary(), 0);
+    };
+    handlePointerLeave = (e) => {
+        if (!this.canHover ||
+            this.openedByTouch ||
+            this.openedByClick ||
+            !this.slotCtrl.has('secondary'))
+            return;
+        if (e.pointerType !== 'mouse')
+            return;
+        window.clearTimeout(this.hoverTimer);
+        this.hoverTimer = window.setTimeout(() => this.closeSecondary(), 200);
+    };
+    handleFocusOut = (e) => {
+        if (!this.canHover || !this.didOpen)
+            return;
+        // only close if focus left the nav-item entirely
+        if (e.relatedTarget && this.host.contains(e.relatedTarget))
+            return;
+        if (e.relatedTarget &&
+            this.host.shadowRoot?.contains(e.relatedTarget))
+            return;
+        this.closeSecondary();
+    };
+    awaitTransition(signal) {
+        return new Promise((resolve) => {
+            const fallback = window.setTimeout(() => resolve(true), 1000);
+            const cleanup = () => window.clearTimeout(fallback);
+            signal.addEventListener('abort', () => {
+                cleanup();
+                resolve(false);
+            }, { once: true });
+            this.secondaryDiv.addEventListener('transitionend', () => {
+                cleanup();
+                resolve(true);
+            }, { once: true, signal });
+        });
+    }
     closeSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || !this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = false;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: false,
-        });
+        this.secondaryDiv.part.remove('modal--open');
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
+        this.secondaryDiv.style.display = 'none';
+        this.openedByClick = false;
         this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = false;
     };
     openSecondary = async () => {
         if (!this.slotCtrl.has('secondary') || this.open)
             return;
+        this.transitionAbort?.abort();
+        this.transitionAbort = new AbortController();
+        const { signal } = this.transitionAbort;
         this.open = true;
-        await displayTransition(this.secondaryDiv, {
-            className: 'modal--open',
-            showProp: 'part',
-            show: true,
-        });
+        this.secondaryDiv.style.display = 'block';
+        window.setTimeout(() => {
+            if (!signal.aborted)
+                this.secondaryDiv.part.add('modal--open');
+        }, 50);
+        const completed = await this.awaitTransition(signal);
+        if (!completed)
+            return;
         this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
         this.didOpen = true;
     };
@@ -213,6 +232,15 @@ const NavItem = class {
         if (this.disabled)
             return;
         if (this.slotCtrl.has('secondary')) {
+            if (this.canHover) {
+                if (this.didOpen) {
+                    // already open via hover — lock it open, suppress hover-close
+                    this.openedByClick = true;
+                    return;
+                }
+                // opening via click in hover mode — lock it
+                this.openedByClick = true;
+            }
             this.toggleSecondary();
             return;
         }
@@ -243,29 +271,37 @@ const NavItem = class {
     connectedCallback() {
         this.handleDefaultSlotChange();
         this.isInMenuDrawer = !!this.host.closest(renderer.transformTag('nano-menu-drawer'));
+        this.openOnHoverChanged();
+    }
+    disconnectedCallback() {
+        window.clearTimeout(this.hoverTimer);
+        this.removeHoverListeners();
     }
     componentDidLoad() {
         this.openChange();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'b6ce27588c1ca2ac2a42d0aada06d7f554a1174a', class: {
+        return (renderer.h(index.Host, { key: '5b7160c2d8712548475c34340cd654d4e17ccfbb', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, renderer.h("div", { key: 'e8faa3568a13feb95ef131f0bd412577120fbf84', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, renderer.h("div", { key: '92d8b0b88a51214a5fa177d20be957b61e049916', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (renderer.h("a", { key: '4a4da7478db63015d0dcd81ed053146f8eeac5f3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (renderer.h("a", { key: '4b0b32b1c33506ef94e1321e6b6840fa0ddc64cc', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-            } }, renderer.h("slot", { key: '1eafb7864368850ad2539c402eb1b00877f3d55e', name: "icon-start" }), renderer.h("span", { key: '8953312d4dad64ced970d2f1120c07b6c36070f1', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '390f468f8d1f5d4f0669cae53ef140e452b16b07', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '3ecd42c2ca6c1546f48a1a5fcf7742d90ad4e1c4', name: "icon-end" }))), (!this.href || this.disabled) && (renderer.h("button", { key: '0694ce0708264ef1305e4b926a2f40f1875025a9', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, renderer.h("slot", { key: '10b8c3c7a4903d8317f01da20a3bdf9196bc1438', name: "icon-start" }), renderer.h("span", { key: '2244f23ee2eb590f471c515243e30d5a15b38df3', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '7f330c217ec16b81851e6a1ae4c37098b75cd799', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '831d05cc6a55eba753d3bb877983337e88991bd6', name: "icon-end" }))), (!this.href || this.disabled) && (renderer.h("button", { key: '8ff3bbecbf1401830487bf116b27311d4be0d13d', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, "aria-expanded": this.slotCtrl.has('secondary')
+                ? this.didOpen.toString()
+                : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-            } }, renderer.h("slot", { key: 'c3cc4fcbb527f5f8ea2786243fe610d587e36190', name: "icon-start" }), renderer.h("span", { key: '385c92f1f2cc26b9c7e4f1a8601920c1f3bf2171', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '4e7a75c8903081856c20206aa309c2a9855991da', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '668b95901ba0b914ccc193d4f3cc4433d908c014', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (renderer.h("div", { key: 'f81c9aeb6c903b25a662fd1fc615d6f95f6b8f4d', part: "modal", class: {
+            } }, renderer.h("slot", { key: 'eb814e8de2bbec584722ab92956eef03262611d3', name: "icon-start" }), renderer.h("span", { key: '76ad3a122201c9d2cd23ba7898662e3d134b02ba', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '9a6e9153990ee4ad34ed8db1f7e1aa4ad54ea587', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '6b0d010032497dd1f037e982c245891d8603da25', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (renderer.h("div", { key: 'bff80914555716d7515c97535113be7aa4ad6f0a', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, renderer.h("div", { key: '70a4b002e989753c461c7dac4dd975200a92e3de', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (renderer.h("div", { key: '7b0daad80ae03a29789c9d2bef74d2473f2f1f39', part: "close-button", onClick: this.closeSecondary }, renderer.h("slot", { key: '858798062958ea0f4ee809cbf853bdb83dd4d184', name: "close-button" }))), renderer.h("slot", { key: '41583a8cc59babbfb1a9a084a3de31c61a145fbc', name: "secondary" })), renderer.h("div", { key: '5c260dca9a8fdf7951349df64a037fc7415c3c4b', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, renderer.h("div", { key: '3e7495704a435455446c243a590d82cdde632d5a', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (renderer.h("div", { key: '613887997d246e3b49f9c7c876859181c3d8089e', part: "close-button", onClick: this.closeSecondary }, renderer.h("slot", { key: '82da2c670fcda49aafb78b00603716ae7667e445', name: "close-button" }))), renderer.h("slot", { key: '8c1906a9116fcd80cd34a51d68c012982c9858cf', name: "secondary" })), renderer.h("div", { key: '3731b3264e9a15b11078df8679a885e5b5d3e5dc', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
+        "openOnHover": ["openOnHoverChanged"],
         "open": ["openChange"],
         "didOpen": ["didOpenChange"]
     }; }

package/dist/cjs/nano-option-box.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 const optionBoxCss = ":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}}";
 

package/dist/cjs/nano-progress-bar.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 const progressBarCss = ":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}}nano-progress-bar{--indicator-color:var(--nano-color-fill-primary);--track-color:var(--nano-color-fill-neutral-weak);--border-radius:1.25rem;--height:0.625rem;display:grid;position:relative;overflow:clip;border-radius:var(--border-radius);block-size:var(--height);font-size:var(--height)}nano-progress-bar[size=small]{--height:0.3125rem}nano-progress-bar[size=large]{--height:0.9375rem}nano-progress-bar progress{appearance:none;inline-size:100%;block-size:inherit;border-radius:var(--border-radius);background-color:var(--track-color);grid-area:1/1}nano-progress-bar>label{grid-area:1/1;position:absolute;inset:0}nano-progress-bar>label progress{position:absolute;inset:0}nano-progress-bar:has(progress:not([value]))::after{content:\"\";inline-size:100%;inset:0;display:block;transform:translateZ(0);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);background-color:var(--indicator-color);grid-area:1/1;border-radius:none}nano-progress-bar progress:not([value])::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress:not([value])::-moz-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}nano-progress-bar progress[value]::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress[value]::-webkit-progress-value{background-color:var(--indicator-color);-webkit-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar progress[value]::-moz-progress-bar{background-color:var(--indicator-color);-moz-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar[show-percent] progress[value]::before{content:attr(value) \"%\";position:absolute;inline-size:attr(value %);min-inline-size:6%;inset-block-start:50%;translate:0 -50%;text-align:center;transition:inline-size var(--nano-transition-fast);font-size:0.75em;color:var(--nano-color-background-default)}";
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 var math = require('./math-DIjJ3V87.js');
 var throttle = require('./throttle-CrRDOkln.js');
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 var math = require('./math-DIjJ3V87.js');
 
 const ratingCss = ".sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-rating-h,*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-rating-h{--symbol-color:var(--nano-color-fill-neutral-weak);--symbol-color-active:var(--nano-color-fill-primary);--symbol-spacing:0.25rem;--symbol-size:1.3125rem;display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating-label.sc-nano-rating{inline-size:100%;overflow:clip;white-space:nowrap;text-overflow:ellipsis;color:var(--nano-color-surface-contrast);font-size:var(--nano-font-size-xs);padding-block-end:var(--nano-spacing-sm);line-height:1;display:flex;align-items:center}.visually-hidden.sc-nano-rating{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.rating.sc-nano-rating{position:relative;vertical-align:middle;inline-size:100%}.rating.sc-nano-rating:focus{outline:none}.rating.sc-nano-rating:focus-visible:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";

package/dist/cjs/nano-resize-observe.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const ResizeObserve = class {
     constructor(hostRef) {

package/dist/cjs/nano-search-result.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 const searchResultCss = ":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}}";
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const slideCss = ":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{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}:host(:not([ready])){flex:1 0 auto}";
 

package/dist/cjs/{nano-slides-D-ELnUF-.js → nano-slides-QbssxNUC.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 function EvEmitter() { }
 const proto$4 = EvEmitter.prototype;
@@ -2505,6 +2505,7 @@ const Slides = class {
     slidesReady;
     didInit = false;
     slideCount = 0;
+    pageCount = 0;
     get host() { return index.getElement(this); }
     /**
      * Options to pass to the flickity instance.
@@ -2646,6 +2647,16 @@ const Slides = class {
         flickity.reloadCells();
         flickity.resize();
         flickity.reposition();
+        this.updatePageCount();
+    }
+    /**
+     * Sync the pager dot count with the number of flickity page groups.
+     * When `groupCells` is enabled, flickity groups several cells into a single
+     * page, so the dot count must reflect `flickity.slides` rather than the raw
+     * number of child slides.
+     */
+    updatePageCount() {
+        this.pageCount = this.syncflickity?.slides.length ?? this.slideCount;
     }
     /**
      * Transition to the specified slide.
@@ -2812,15 +2823,15 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-CiU1Fy55.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-BYNt89kR.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-vgYlCqUh.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-CLpLl1ob.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-Cgz_uvea.js'); });
+            await Promise.resolve().then(function () { return require('./fade-Cng4p1KQ.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2850,6 +2861,7 @@ const Slides = class {
             this.readyflickity(flick);
             this.ready = true;
             this.isReloading = false;
+            this.updatePageCount();
             if (!window['ResizeObserver'])
                 return;
             if (this.resizeO) {
@@ -2864,6 +2876,7 @@ const Slides = class {
                         if (vp)
                             vp.style.height = '';
                         flick.resize();
+                        this.updatePageCount();
                     });
                 });
             }));
@@ -2952,15 +2965,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'b6f08fc2b892fa03e5e5d1c6faa8c9ed5c96909f', class: "nano-slides" }, renderer.h("div", { key: '31703829da5889f44e9918c813b71a9c12955881', class: {
+        return (renderer.h(index.Host, { key: '51c5bac1a4200ebf02c679237e39b6f62f37424e', class: "nano-slides" }, renderer.h("div", { key: '94633663fd3ad69b4c1bc98c4749c048f57617cf', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: '9f85e49dc9fc7e78fd73aabf81f21bcb4f7c9a29', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: '056922cbc6ff858bc237a9ec45ebbb281f4b4002', 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: 'df99653f152b14f4e06e2451a93e7517c82027d9', onSlotchange: () => this.update() })), renderer.h("div", { key: '0f34a9196a369cadc93a7a678f318f036a4f8bc2', class: "ui-extras" }, renderer.h("slot", { key: '6fee3e51010cbdd25ad74b59e86133a30501fe13', name: "ui" })), this.slideCount > 1 && (this.pager || this.navbtns) && (renderer.h("div", { key: '54c54f41d109ea9ee44cad50dd8929046b8fabf0', class: "pagination", part: "pagination" }, this.navbtns && (renderer.h("button", { key: '6c06cd8854f495dd8df48b94c98eb5cfa5767947', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, renderer.h("span", { key: 'a7a80501503e055217b546ef618f9665eee79ebc', class: "button-icon button-icon--previous", part: "navigation-icon" }, renderer.h("slot", { key: 'd43695afeecb25ba5ba5b0dc674ee4123b35540f', name: "previous-icon" })))), this.pager && (renderer.h("div", { key: '5e975ec703c51f361f654afac6bc03a7e4d03892', class: "flickity-page-dots" }, Array.from({ length: this.slideCount }).map((_, index) => (renderer.h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, renderer.h("slot", { key: '064767dbec8679ae75f783629737454832821ad4', onSlotchange: () => this.update() })), renderer.h("div", { key: '2628c6d3411307f5f42a04986e77839cc9f4a5cd', class: "ui-extras" }, renderer.h("slot", { key: '7d1df51cbe0f20db37e266779ea7e63b4b136070', name: "ui" })), this.pageCount > 1 && (this.pager || this.navbtns) && (renderer.h("div", { key: '96023f86df7c1cfb7250f9b348a71f7f5b66b7f8', class: "pagination", part: "pagination" }, this.navbtns && (renderer.h("button", { key: 'bcf85a09b3210ba78ff19592b991fe3873ce2b75', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, renderer.h("span", { key: 'c4d0bcf5fb2b963dd36481dbbd2e229d44ac02e4', class: "button-icon button-icon--previous", part: "navigation-icon" }, renderer.h("slot", { key: '004f8f5b4513e55240d9703e641c5e59184c3af1', name: "previous-icon" })))), this.pager && (renderer.h("div", { key: 'd8ae45a8b450e5870a566cf986460a649a887df9', class: "flickity-page-dots" }, Array.from({ length: this.pageCount }).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),
@@ -2969,8 +2982,8 @@ const Slides = class {
                 if (this.isActive(index))
                     return;
                 this.slideTo(index);
-            } }, renderer.h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (renderer.h("button", { key: '7670270c71a6eb61e9a1de33f4a4214ed4a035f9', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
-                this.iCurrentSlide + 1 && !this.options.wrapAround }, renderer.h("span", { key: '7140891f079fc702044e6bd46aaaf996dbac02d7', class: "button-icon", part: "navigation-icon" }, renderer.h("slot", { key: 'ceed5fb13ebf410b999f7b4a10a0489b2162d4ed', name: "next-icon" })))))))));
+            } }, renderer.h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (renderer.h("button", { key: '65592f3e81fadad36aa20be8738b9fd94d4d9ca5', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
+                this.iCurrentSlide + 1 && !this.options.wrapAround }, renderer.h("span", { key: '0a0cca0e3e66648009861c3dd2474a0882c3c5bb', class: "button-icon", part: "navigation-icon" }, renderer.h("slot", { key: '2b709b10a39ca707ec622983e83e4ba79e9989ee', name: "next-icon" })))))))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],

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

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-D-ELnUF-.js');
-require('./index-DGttnXif.js');
-require('./renderer-jVpDRMfV.js');
+var nanoSlides_entry = require('./nano-slides-QbssxNUC.js');
+require('./index-C7Ikbhe3.js');
+require('./renderer-bX7EsIYR.js');
 
 
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 var drag = require('./drag-B5XXLJW9.js');
 var throttle = require('./throttle-CrRDOkln.js');
 var events = require('./events-pBdXJwIU.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-C7Ikbhe3.js');
 
 const spinnerCss = ":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}}:where(nano-spinner,.nano-spinner){display:inline-block;--track-size:.1em;--indicator-color:var(--nano-color-fill-primary);--track-color:var(--nano-color-fill-neutral-weak);--overlay-color:rgb(var(--nano-color-base-rgb-0) / 88%);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--nano-spacing-xs)}:where(nano-spinner,.nano-spinner)::after{content:\"\";order:-1;font-size:1em;display:block;inline-size:1em;block-size:1em;border-radius:50%;border:solid var(--track-size) var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite loading-spin}:where(nano-spinner,.nano-spinner)>:not([slot=label]){display:none}:where(nano-spinner,.nano-spinner) [slot=label]{font-size:var(--nano-font-size-sm);color:var(--nano-color-fill-neutral);display:block;text-align:center;position:relative;z-index:1}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false]){position:absolute;inset:0;display:grid;grid-template-rows:auto auto;z-index:var(--nano-z-index-mask);justify-items:center}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false])::before{content:\"\";order:-2;position:absolute;inset:0;background:var(--overlay-color);z-index:-1}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false]) [slot=label]{align-self:start;grid-row:2}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false])::after{align-self:end;grid-row:1;position:relative}@keyframes loading-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 

package/dist/cjs/nano-split-pane.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 var drag = require('./drag-B5XXLJW9.js');
 var math = require('./math-DIjJ3V87.js');
 var throttle = require('./throttle-CrRDOkln.js');

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const stepAccordionCss = ":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{display:block}.nano-details{--padding:0;--btn-bg-color--hover:transparent;--btn-bg-color--active:transparent;border:none;margin-block-end:var(--nano-spacing-sm)}.nano-details::part(base){display:grid;grid-template-rows:auto auto;grid-template-columns:auto 1fr;gap:var(--nano-spacing-sm) 1.625rem}.nano-details.step--grid-working::part(base)::before{content:\"\";display:block;grid-column:1;grid-row:2;inline-size:1rem;min-block-size:1rem;border-inline-end:2px solid var(--nano-color-border-default)}.nano-details.step--grid-working::part(base)::after{content:\"\";grid-column:1;grid-row:2;inline-size:0.4rem;block-size:0.4rem;place-self:end end;translate:-50% 0;inset-inline-start:calc(50% - 2.5px);position:relative;border-inline-end:2px solid var(--nano-color-border-default);border-block-end:2px solid var(--nano-color-border-default);rotate:45deg}.nano-details:last-of-type::part(base)::before{min-block-size:0}.nano-details:last-of-type::part(base)::after{display:none}.nano-details::part(header){grid-column:1/-1;grid-row:1;display:inline-flex;gap:var(--nano-spacing-sm)}.nano-details::part(body){grid-column:2;grid-row:2}.nano-details::part(content-wrapper){padding:1px}.nano-details.step--grid-not-working::part(header){padding-block-end:var(--nano-spacing-sm)}.nano-details.step--grid-not-working::part(body){padding:0 0 0 2.5625rem}.step .step-header{display:inline-flex;gap:var(--nano-spacing-sm);align-items:center}.step .step-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-text-default);border:1px solid var(--nano-color-border-default)}.step.step--complete .step-icon{background-color:var(--nano-color-fill-success);color:var(--nano-color-basic-white);border:none}.step[open] .step-icon{background-color:var(--nano-color-fill-primary);color:var(--nano-color-basic-white);border:none}.step .step-change{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-decoration:underline;color:var(--nano-color-text-link)}";
 

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

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
-var constructibleStyle = require('./constructible-style-BsHBb9au.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
+var constructibleStyle = require('./constructible-style-CRdAciHm.js');
 var style = require('./style-Du-L-qMa.js');
 
 const stepBreadcrumbCss = ":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{display:block;--background:var(--nano-color-background-default)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-fill-neutral-weak);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-fill-neutral-weak);border-block-end:1px solid var(--nano-color-fill-neutral-weak);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--nano-border-radius-circle);background-color:transparent;color:var(--nano-color-text-default);border:1px solid var(--nano-color-fill-neutral-weak)}.step-item--complete .step-item-icon{background-color:var(--nano-color-fill-success);color:var(--nano-color-basic-white);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-fill-primary);color:var(--nano-color-basic-white);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-text-default)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-fill-neutral)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-fill-primary);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-fill-success) calc(var(--value) / var(--max) * 360deg), var(--nano-color-surface-neutral) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-fill-neutral)}.step-progress-title strong{color:var(--nano-color-text-default)}";

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

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var dom = require('./dom-Dxk5vXYq.js');
+var index = require('./index-C7Ikbhe3.js');
+var dom = require('./dom-CIEcUG2R.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var scroll = require('./scroll-C6pO9RvO.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var scroll = require('./scroll-DC2gHZby.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const stickerCss = ":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{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-z-index-menubar);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index=\"1\"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index=\"2\"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index=\"3\"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index=\"4\"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index=\"5\"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index=\"1\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index=\"2\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index=\"3\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index=\"4\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index=\"5\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}";
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-C7Ikbhe3.js');
+var renderer = require('./renderer-bX7EsIYR.js');
 
 const tabContentCss = ":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{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";