@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-menu-drawer.cjs.entry.js

@@ -1,16 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var dom = require('./dom-a3wgHxbn.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
-const index = require('./index-615cdb64.js');
-const dom = require('./dom-b99a1aec.js');
-const renderer = require('./renderer-cd8b6098.js');
-
-const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
-const NanoMenuDrawerStyle0 = menuDrawerCss;
+const menuDrawerCss = ":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{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
 
 const MenuDrawer = class {
     constructor(hostRef) {
@@ -175,13 +172,13 @@ const MenuDrawer = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '977db4e79201de998a87723002144d9204789091', class: {
+        return (renderer.h(index.Host, { key: 'ce58d5db4ed3a23557189fbc3eb2cf0a0ad32edd', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: '7bc2a2d85dfc8c7ff749f129fe11e5df0d935d94', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'd1ed040d7097e465f029b6cc12501df8003f7dbb', class: "content-wrap" }, renderer.h("nav", { key: '4e09d7672d80e481475042fd4cc8ab44cda7cd6f', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("button", { key: '5e58c9f3c21d0827545483ef0c6c65bf007a1c0e', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, renderer.h("nano-icon", { key: '40948e236760b128caa0f5c99d630642cc207cc4', name: "light/right-to-line", "aria-label": "collapse / expand" })), renderer.h("slot", { key: '337162928f8f99f2e6933d9c7afbf3b64bdda765' }), renderer.h("div", { key: 'd24cbc327b9d2fa1f1dff2332301741f110f3c48', class: "foot" }, renderer.h("div", { key: '8efedd05e75e0030cb3cb56a19feb86c14b94328', class: "measure-ele", ref: (div) => (this.measureEle = div) }), renderer.h("slot", { key: '1214dfbbf736eb5afeb7de299fd3280beebef7e1', name: "foot" })))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: 'a68d7698be7747a6a191a44364b615c3866f8160', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'f6c92461b79e0b3e44f138736ef65089680101a8', class: "content-wrap" }, renderer.h("nav", { key: '51ce192b7cbb38233baced954f4228e756052026', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("button", { key: '5662329d6320ef44d837afc823c09beb1563c0fe', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, renderer.h("nano-icon", { key: '77d0e152d06593f3999072a1b557673a8ddc8a72', name: "light/right-to-line", "aria-label": "collapse / expand" })), renderer.h("slot", { key: '8369d8882e41547e088ec41401cc2273efb2b59a' }), renderer.h("div", { key: '90c996a4d1debfd4965353e5e60548605418dfbd', class: "foot" }, renderer.h("div", { key: '3ca7e34bde41f742d20edbef571400c875179858', class: "measure-ele", ref: (div) => (this.measureEle = div) }), renderer.h("slot", { key: '1b5d32415c0e727788186bd9011de394cb7b5759', name: "foot" })))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
@@ -189,8 +186,6 @@ const MenuDrawer = class {
         "hideHeight": ["hideHeightChange"]
     }; }
 };
-MenuDrawer.style = NanoMenuDrawerStyle0;
+MenuDrawer.style = menuDrawerCss;
 
 exports.nano_menu_drawer = MenuDrawer;
-
-//# sourceMappingURL=nano-menu-drawer.cjs.entry.js.map

package/dist/cjs/nano-more-less.cjs.entry.js

@@ -1,12 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
 const Rating = class {
     constructor(hostRef) {
@@ -56,8 +54,8 @@ const Rating = class {
         this.handleShowHideElements();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, renderer.h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            renderer.h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, renderer.h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (renderer.h(index.Host, { key: '7f46f40188321a9cd630f92e0722c386f8f150cd', class: "nano-more-less" }, renderer.h("slot", { key: 'f0cb809863400df4431e6781c1f119563fea95b6', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            renderer.h("div", { key: 'fccb42c61cbef50e41ca19ec572bceb4cb3257be', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'ec04633371ae61f4a33131ab8bfe98a7e408150f', name: "less" }, renderer.h("button", { key: 'f7382a01305934711d7f6471369aa29523f99d9d', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (renderer.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { name: "more" }, renderer.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }
@@ -70,5 +68,3 @@ const Rating = class {
 Rating.style = ":host { display: contents; }";
 
 exports.nano_more_less = Rating;
-
-//# sourceMappingURL=nano-more-less.cjs.entry.js.map

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

@@ -0,0 +1,271 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var dom = require('./dom-a3wgHxbn.js');
+var tabbable = require('./tabbable-M9OUrhLE.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var slot = require('./slot-CBvkJee9.js');
+var activeElement = require('./active-element-DB7WRcF-.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)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}";
+
+const NavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.nanoClose = index.createEvent(this, "nanoClose", 7);
+        this.nanoOpen = index.createEvent(this, "nanoOpen", 7);
+        this.nanoOpening = index.createEvent(this, "nanoOpening", 7);
+        this.nanoClosing = index.createEvent(this, "nanoClosing", 7);
+    }
+    secondaryDiv;
+    slotCtrl = new slot.HasSlotController(this, 'secondary', 'close-button');
+    controlElement;
+    get host() { return index.getElement(this); }
+    didOpen = false;
+    isInMenuDrawer = false;
+    /** Href to link to. Alternatively, slot an `<a>` element */
+    href = null;
+    /** Target to use for links */
+    target = '_self';
+    /** Disable the nav item */
+    disabled = false;
+    /** Whether a secondary menu should be or is currently open */
+    open = false;
+    /** Whether this menu item is currently 'selected' */
+    selected = false;
+    /** Changes behaviour so automatically becomes `selected` onClick */
+    checkbox = false;
+    /** Whether secondary menus should close on blur */
+    closeOnBlur = true;
+    /** Will show an indicator badge - only when placed in a nano-menu-draw */
+    notification = false;
+    /** Emitted when the nav item closes it's secondary navigation. */
+    nanoClose;
+    /** Emitted when the nav item opens it's secondary navigation. */
+    nanoOpen;
+    /** Emitted when the nav item is about to open it's secondary navigation. */
+    nanoOpening;
+    /** Emitted when the nav item is about to close it's secondary navigation. */
+    nanoClosing;
+    /**
+     * Sets focus on the first button or anchor present. Use this method instead of the global
+     * `element.focus()`.
+     */
+    async setFocus() {
+        if (!this.controlElement)
+            return;
+        this.controlElement.focus();
+    }
+    openChange() {
+        if (!this.slotCtrl.has('secondary'))
+            return;
+        if (this.open)
+            this.openSecondary();
+        else
+            this.closeSecondary();
+    }
+    didOpenChange() {
+        if (!this.slotCtrl.has('secondary'))
+            return;
+        if (!this.didOpen) {
+            /* closing. Remove blur events, add focus back to originating button */
+            if (activeElement.focusInContainer(this.host, this.controlElement)) {
+                this.controlElement.focus({ preventScroll: true });
+            }
+            this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
+            return;
+        }
+        // opening
+        /* scroll content into view, focus on it */
+        const panelIO = new window.IntersectionObserver((data) => {
+            if (data[0].boundingClientRect.top < 0) {
+                this.secondaryDiv.scrollIntoView({
+                    behavior: 'smooth',
+                });
+            }
+            panelIO.disconnect();
+        }, { threshold: 1 });
+        panelIO.observe(this.secondaryDiv);
+        this.secondaryDiv.focus({ preventScroll: true });
+        const focusableChild = tabbable.getTabbableElements(this.secondaryDiv, true);
+        if (focusableChild[0]) {
+            focusableChild[0].focus({ preventScroll: true });
+        }
+        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });
+    }
+    handleClose(e) {
+        if (!this.didOpen || !this.slotCtrl.has('secondary') || !this.closeOnBlur)
+            return;
+        if (e.key && e.key === 'Escape') {
+            this.closeSecondary();
+            return;
+        }
+        if (!e.composedPath().some((el) => el === this.secondaryDiv)) {
+            this.closeSecondary();
+        }
+    }
+    closeSecondary = async () => {
+        if (!this.slotCtrl.has('secondary') || !this.open)
+            return;
+        this.open = false;
+        await displayTransition(this.secondaryDiv, {
+            className: 'modal--open',
+            showProp: 'part',
+            show: false,
+        });
+        this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
+        this.didOpen = false;
+    };
+    openSecondary = async () => {
+        if (!this.slotCtrl.has('secondary') || this.open)
+            return;
+        this.open = true;
+        await displayTransition(this.secondaryDiv, {
+            className: 'modal--open',
+            showProp: 'part',
+            show: true,
+        });
+        this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
+        this.didOpen = true;
+    };
+    toggleSecondary = () => {
+        if (!this.slotCtrl.has('secondary'))
+            return;
+        if (this.didOpen)
+            this.closeSecondary();
+        else
+            this.openSecondary();
+    };
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.slotCtrl.has('secondary')) {
+            this.toggleSecondary();
+            return;
+        }
+        if (this.checkbox) {
+            this.selected = !this.selected;
+        }
+    };
+    handleDefaultSlotChange = () => {
+        const slottedA = dom.getDirectChildren(this.host, 'a')[0];
+        if (slottedA) {
+            this.href = slottedA.getAttribute('href');
+            const label = document.createElement('span');
+            slottedA.childNodes.forEach((el) => {
+                label.append(el);
+            });
+            this.host.append(label);
+            slottedA.remove();
+        }
+    };
+    connectedCallback() {
+        this.handleDefaultSlotChange();
+        this.isInMenuDrawer = !!this.host.closest(renderer.transformTag('nano-menu-drawer'));
+    }
+    componentDidLoad() {
+        this.openChange();
+    }
+    render() {
+        return (renderer.h(index.Host, { key: '7554eb7a4a66fc4f899b40b35265245a3be931f8', 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: '4bf288ec9f9162bb746b70b085fde42b871f93fb', class: {
+                navitem: true,
+                'navitem--open': this.open,
+                'navitem--active': this.selected,
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (renderer.h("a", { key: 'a9bf5adf3da060452ed58e2c6e1eba45168815a3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+                navitem__trigger: true,
+                notification: this.notification,
+            } }, renderer.h("slot", { key: '47cdd2e84dd51f236675351c599d8e9f9bf66ede', name: "icon-start" }), renderer.h("span", { key: 'a15d804a252ed532501fb08536ed5ce8a3b42e47', class: "navitem__label", part: "label" }, renderer.h("slot", { key: 'ea37d813d0fd15bd457930b61d06cd97d64fce35', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '384a3212fba3d0cc3d488974dcaf53c23c3942e1', name: "icon-end" }))), (!this.href || this.disabled) && (renderer.h("button", { key: '698c4beb9cddb3b2037db40b5c9e33a276dad060', 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: {
+                navitem__trigger: true,
+                notification: this.notification,
+            } }, renderer.h("slot", { key: 'c01a71dfaeb867d2792146110fdde1dd134b7f71', name: "icon-start" }), renderer.h("span", { key: '6a48071ba10f1407350e87958ed491f704714ea8', class: "navitem__label", part: "label" }, renderer.h("slot", { key: '246f807c0a03a8805fea87023f48de2f5fa7a7a0', onSlotchange: this.handleDefaultSlotChange })), renderer.h("slot", { key: '6a246213800a4425464ac41aefe9362e327d412f', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (renderer.h("div", { key: '8928988fd43de734785801c9fc7707fb7efa33c3', part: "modal", class: {
+                navitem__modal: true,
+                'navitem__modal--open': this.didOpen,
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, renderer.h("div", { key: 'eca197afa8cb297eeafc4b7a55ffb6fb288c498c', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (renderer.h("div", { key: '5a774cf15677b3848f80c0cf5bee87da44e3ca04', part: "close-button", onClick: this.closeSecondary }, renderer.h("slot", { key: '57a08ef1239b6c29241524e3c7ac977c78c910d5', name: "close-button" }))), renderer.h("slot", { key: '6c35ed89b61461fcc294cddc022c57255558a63b', name: "secondary" })), renderer.h("div", { key: '163003649197f1ed341836e73e7acd50c7abc640', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+    }
+    static get watchers() { return {
+        "open": ["openChange"],
+        "didOpen": ["didOpenChange"]
+    }; }
+};
+NavItem.style = navItemCss;
+
+exports.nano_nav_item = NavItem;

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

@@ -1,15 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-
-const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
-const NanoProgressBarStyle0 = progressBarCss;
+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}}:host{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 
 const ProgressBar = class {
     constructor(hostRef) {
@@ -23,18 +20,16 @@ const ProgressBar = class {
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (renderer.h(index.Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, renderer.h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
+        return (renderer.h(index.Host, { key: '2d33cb1a93d9b155cef4ea64b1a36a275104ed5c', class: "nano-progress-bar" }, renderer.h("div", { key: '1477b01e971f00541af5501df4f42c2d69cb87d4', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, renderer.h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, renderer.h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, renderer.h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, renderer.h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            } }, renderer.h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, renderer.h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
             ? `${this.value}%`
             : ''))))));
     }
 };
-ProgressBar.style = NanoProgressBarStyle0;
+ProgressBar.style = progressBarCss;
 
 exports.nano_progress_bar = ProgressBar;
-
-//# sourceMappingURL=nano-progress-bar.cjs.entry.js.map

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

@@ -1,15 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const math = require('./math-ea9cdc71.js');
-const theme = require('./theme-a2f7ddf8.js');
-const throttle = require('./throttle-46a497fb.js');
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var math = require('./math-DIjJ3V87.js');
+var theme = require('./theme-2potFCtG.js');
+var throttle = require('./throttle-CrRDOkln.js');
 
 const renderHiddenInput = (container, name, value, disabled) => {
     let input = container.querySelector('input.aux-input');
@@ -24,8 +22,7 @@ const renderHiddenInput = (container, name, value, disabled) => {
     input.value = value || '';
 };
 
-const rangeCss = ".sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;inline-size:100%;block-size:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;inline-size:100%;block-size:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;inline-size:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;inline-size:var(--knob-size);block-size:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;inline-size:calc(var(--knob-handle-size));block-size:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inline-size:var(--bar-height);block-size:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-inline-size:2.33em;block-size:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;inline-size:2.16em;block-size:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}";
-const NanoRangeStyle0 = rangeCss;
+const rangeCss = ".sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-range-h,*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;inline-size:100%;block-size:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;inline-size:100%;block-size:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;inline-size:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;inline-size:var(--knob-size);block-size:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;inline-size:calc(var(--knob-handle-size));block-size:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inline-size:var(--bar-height);block-size:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-inline-size:2.33em;block-size:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;inline-size:2.16em;block-size:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}";
 
 const Range = class {
     constructor(hostRef) {
@@ -168,7 +165,7 @@ const Range = class {
     async componentDidLoad() {
         const rangeSlider = this.rangeSlider;
         if (rangeSlider) {
-            this.gesture = (await Promise.resolve().then(function () { return require('./index-41263d6e.js'); })).createGesture({
+            this.gesture = (await Promise.resolve().then(function () { return require('./index-D0X7QVou.js'); })).createGesture({
                 el: rangeSlider,
                 gestureName: 'range',
                 gesturePriority: 100,
@@ -435,8 +432,6 @@ const ratioToValue = (ratio, min, max, step) => {
 const valueToRatio = (value, min, max) => {
     return math.clamp(0, (value - min) / (max - min), 1);
 };
-Range.style = NanoRangeStyle0;
+Range.style = rangeCss;
 
 exports.nano_range = Range;
-
-//# sourceMappingURL=nano-range.cjs.entry.js.map

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

@@ -1,17 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var math = require('./math-DIjJ3V87.js');
 
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const focusVisible = require('./focus-visible-39b54d1f.js');
-const math = require('./math-ea9cdc71.js');
-
-const ratingCss = ".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.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}";
-const NanoRatingStyle0 = ratingCss;
+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:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.sc-nano-rating:focus-visible:focus{box-shadow:var(--focus-shadow)}.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}";
 
 const Rating = class {
     constructor(hostRef) {
@@ -161,16 +157,12 @@ const Rating = class {
         return `rect(0, ${(tw / 100) * ((displayValue / this.max) * 100)}px, 2em, 0)`;
     }
     componentDidLoad() {
-        focusVisible.focusVisible.observe(this.rating);
         setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);
     }
     connectedCallback() {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
     }
-    disconnectedCallback() {
-        focusVisible.focusVisible.unobserve(this.rating);
-    }
     render() {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
@@ -182,31 +174,29 @@ const Rating = class {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (renderer.h(index.Host, { key: 'e7aec714fffd7abf991de7f31712d6a85a67ee75', class: "nano-rating" }, renderer.h("div", { key: '1865bfccf63d3b544e394abb8e4c9141636dd930', class: "rating-wrap" }, renderer.h("div", { key: '5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (renderer.h(index.Host, { key: 'cecf5fdd43d5b48e55ddd4c69900e82c85c48bee', class: "nano-rating" }, renderer.h("div", { key: '87803596623dfc08370dd7e6f0a59bfaed8fcf4f', class: "rating-wrap" }, renderer.h("div", { key: '32da5e5a323bf552e5e04403e7594ecc57739b31', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: '118a16e603a53cbfc515297eb347705277118ca1', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: 'cab05324ead1b6e539e6c162ab0a9f2488a3a801', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: 'b299dae6997acbcece7582efd9f99858cf30b22b', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: 'd369b4d296ba7c763777422a7885a78d0175e0c8', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (renderer.h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), renderer.h("input", { key: '7e134eb0de5e255b474e567406a0ae4f027aa83b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), renderer.h("input", { key: 'd1cfd5eeb33163a3c0f02cde0234bbf0ddbd2805', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "symbolName": ["handleSymbolChange"]
     }; }
 };
-Rating.style = NanoRatingStyle0;
+Rating.style = ratingCss;
 
 exports.nano_rating = Rating;
-
-//# sourceMappingURL=nano-rating.cjs.entry.js.map