@nanoporetech-digital/components 8.3.2 → 8.4.0

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

@@ -0,0 +1,326 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DGttnXif.js');
+var renderer = require('./renderer-B9M1kXq8.js');
+
+let CACHED_MAP;
+const getIconMap = () => {
+    if (!CACHED_MAP) {
+        const win = window;
+        win.Nanoicons = win.Nanoicons || {};
+        CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();
+    }
+    return CACHED_MAP;
+};
+const getUrl = (i) => {
+    let url = getSrc(i.src);
+    if (url)
+        return url;
+    url = getName(i.name, i.icon);
+    if (url)
+        return getNamedUrl(url);
+    if (i.icon) {
+        url = getSrc(i.icon);
+        if (url)
+            return url;
+    }
+    return null;
+};
+const getNamedUrl = (iconName) => {
+    const url = getIconMap().get(iconName);
+    if (url)
+        return url;
+    if (iconName.startsWith('device/') || iconName.startsWith('pictogram/')) {
+        return index.getAssetPath(`../nano-assets/icon/${iconName}.svg`);
+    }
+    return index.getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
+};
+const getName = (iconName, icon) => {
+    if (!iconName && icon && !isSrc(icon)) {
+        iconName = icon;
+    }
+    if (isStr(iconName)) {
+        iconName = toLower(iconName);
+    }
+    if (!isStr(iconName) || iconName.trim() === '') {
+        return null;
+    }
+    // only allow alpha characters and dash
+    const invalidChars = iconName.replace(/[a-z]|-|\/|\d/gi, '');
+    if (invalidChars !== '') {
+        console.warn('invalid characters in icon name ' + iconName);
+        return null;
+    }
+    return iconName;
+};
+const getSrc = (src) => {
+    if (isStr(src)) {
+        src = src.trim();
+        if (isSrc(src))
+            return src;
+    }
+    return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+
+const validateContent = (svgContent) => {
+    if (svgContent && document) {
+        const div = document.createElement('div');
+        div.innerHTML = svgContent;
+        // setup this way to ensure it works on our buddy IE
+        for (let i = div.childNodes.length - 1; i >= 0; i--) {
+            if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+                div.removeChild(div.childNodes[i]);
+            }
+        }
+        // must only have 1 root element
+        const svgElm = div.firstElementChild;
+        if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+            const svgClass = svgElm.getAttribute('class') || '';
+            svgElm.setAttribute('class', (svgClass + ' sc-nano-icon s-nano-icon svg').trim());
+            // root element must be an svg
+            // lets double check we've got valid elements
+            // do not allow scripts
+            if (isValid(svgElm)) {
+                return div.innerHTML;
+            }
+        }
+    }
+    return '';
+};
+const isValid = (elm) => {
+    if (elm.nodeType === 1) {
+        if (elm.nodeName.toLowerCase() === 'script') {
+            return false;
+        }
+        for (let i = 0; i < elm.attributes.length; i++) {
+            const val = elm.attributes[i].value;
+            if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
+                return false;
+            }
+        }
+        for (let i = 0; i < elm.childNodes.length; i++) {
+            if (!isValid(elm.childNodes[i])) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+
+const iconContent = new Map();
+const requests = new Map();
+const getSvgContent = (url) => {
+    // see if we already have a request for this url
+    let req = requests.get(url);
+    if (!req) {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+            if (rsp.ok) {
+                return rsp.text().then((svgContent) => {
+                    iconContent.set(url, validateContent(svgContent));
+                });
+            }
+            iconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+    }
+    return req;
+};
+
+const iconCss = ":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{--icon-size:1em;--primary-color:currentcolor\n  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);--primary-opacity:0.8;--secondary-opacity:1;display:inline-block;inline-size:var(--icon-size);block-size:var(--icon-size);min-inline-size:var(--icon-size);min-block-size:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:currentcolor}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.icon-inner,.nanoicon,svg,.svg{display:block;block-size:100%;inline-size:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host([name^=pictogram]),:host([name^=device]){font-size:max(var(--nano-pictogram-size-medium), var(--icon-size))}:host([size=small][name^=pictogram]),:host([size=small][name^=device]){font-size:var(--nano-pictogram-size-small)}:host([size=regular]){font-size:var(--nano-icon-size-small)}:host([size=regular][name^=pictogram]),:host([size=regular][name^=device]){font-size:var(--nano-pictogram-size-medium)}:host([size=large]){font-size:var(--nano-icon-size-large)}:host([size=large][name^=pictogram]),:host([size=large][name^=device]){font-size:var(--nano-pictogram-size-large)}:host([size=xl][name^=pictogram]),:host([size=xl][name^=device]){font-size:var(--nano-pictogram-size-x-large)}:host([name^=pictogram]),:host([name^=device]),:host([color=primary]){color:var(--nano-color-primary-1100)}:host([color=neutral]){color:var(--nano-color-base-1000)}";
+
+const Icon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.nanoLoad = index.createEvent(this, "nanoLoad", 7);
+        this.nanoError = index.createEvent(this, "nanoError", 7);
+    }
+    io;
+    get el() { return index.getElement(this); }
+    svgContent;
+    isVisible = false;
+    isLoading = true;
+    /**
+     * Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.
+     */
+    color;
+    /**
+     * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)
+     */
+    role;
+    setAriaLabel() {
+        if (!this.ariaLabel && !this.el.ariaLabel) {
+            if (!this.role || this.role !== 'presentation') {
+                // if the role is not 'presentation' and the user did not explicitly set a role,
+                // let's try and derive one from the icon name
+                const label = getName(this.name, this.icon);
+                // user did not provide a label
+                // come up with the label based on the icon name
+                if (label) {
+                    this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');
+                }
+            }
+        }
+        else if (this.role === 'presentation') {
+            this.ariaLabel = undefined;
+        }
+    }
+    /**
+     * Specifies the label to use for accessibility. Defaults to the icon name.
+     */
+    ariaLabel;
+    updateRole() {
+        // force the role to be 'img' if the aria-label is explicitly set
+        if (this.ariaLabel)
+            this.role = 'img';
+        else if (!this.ariaLabel)
+            this.role = 'presentation';
+    }
+    /**
+     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+     * By default, when an 'arrow' or 'chevron' icon is used, it will flip automatically when detecting `dir="rtl"` on the document or closest ancestor.
+     */
+    flipRtl;
+    /**
+     * Specifies which icon to use from the built-in set of icons.
+     */
+    name;
+    /**
+     * Specifies the exact `src` of an SVG file to use.
+     */
+    src;
+    /**
+     * A combination of both `name` and `src`. If a `src` url is detected
+     * it will set the `src` property. Otherwise it assumes it's a built-in named
+     * SVG and set the `name` property.
+     */
+    icon;
+    /**
+     * The size of the icon. `auto` automatically sizes according to the font-size of the parent element.
+     * *Note*: size will be different on 'pictogram' and 'device' vs 'font awesome' icons.
+     */
+    size = 'auto';
+    /**
+     * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `true`.
+     */
+    lazy = true;
+    loadIcon() {
+        if (this.isVisible) {
+            const url = getUrl(this);
+            if (url) {
+                if (iconContent.has(url)) {
+                    // sync if it's already loaded
+                    this.svgContent = iconContent.get(url);
+                    requestAnimationFrame(() => {
+                        this.isLoading = false;
+                        this.nanoLoad.emit();
+                    });
+                }
+                else {
+                    // async if it hasn't been loaded
+                    getSvgContent(url).then(() => {
+                        this.svgContent = iconContent.get(url);
+                        requestAnimationFrame(() => {
+                            this.isLoading = false;
+                            this.nanoLoad.emit();
+                        });
+                        this.setAriaLabel();
+                    }, () => {
+                        // error loading icon
+                        this.nanoError.emit();
+                    });
+                }
+            }
+        }
+    }
+    /** Emitted when the icon has finished loading. */
+    nanoLoad;
+    /** Emitted when the icon fails to load. */
+    nanoError;
+    waitUntilVisible(el, rootMargin, cb) {
+        if (this.lazy &&
+            typeof window !== 'undefined' &&
+            window.IntersectionObserver) {
+            const io = (this.io = new window.IntersectionObserver((data) => {
+                if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {
+                    io.disconnect();
+                    this.io = undefined;
+                    cb();
+                }
+            }, { rootMargin }));
+            io.observe(el);
+        }
+        else {
+            // not a browser env (e.g. node)
+            // or we're not loading lazily
+            // or env doesn't support IntersectionObserver (testing?)
+            // - immediately fetch icon
+            cb();
+        }
+    }
+    isRtl() {
+        // doc is in rtl
+        if (this.el.ownerDocument?.dir === 'rtl')
+            return true;
+        // html element is in rtl element
+        if (this.el.closest('[dir="rtl"]'))
+            return true;
+        // nested in a shadow dom - see if that host element is contained in an rtl element
+        const rootNode = this.el.getRootNode();
+        const ownerHost = rootNode.host;
+        if (ownerHost && ownerHost.closest('[dir="rtl"]'))
+            return true;
+        return false;
+    }
+    connectedCallback() {
+        // purposely do not return the promise here because loading
+        // the svg file should not hold up loading the app
+        // only load the svg if it's visible
+        this.waitUntilVisible(this.el, '50px', () => {
+            this.isVisible = true;
+            this.loadIcon();
+        });
+    }
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.updateRole();
+        this.setAriaLabel();
+    }
+    render() {
+        const flipRtl = this.flipRtl ||
+            (this.name &&
+                this.name.match(/right|left/) &&
+                (this.name.indexOf('arrow') > -1 ||
+                    this.name.indexOf('chevron') > -1) &&
+                this.isRtl());
+        return (renderer.h(index.Host, { key: '0bc1c17119f0e49b9798a1b61a4a768f6406129f', class: {
+                loading: this.isLoading,
+                'flip-rtl': !!flipRtl,
+                'nano-icon': true,
+            } }, this.svgContent ? (renderer.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (renderer.h("div", { class: "icon-inner" }))));
+    }
+    static get assetsDirs() { return ["device", "pictogram"]; }
+    static get watchers() { return {
+        "role": ["setAriaLabel"],
+        "ariaLabel": ["updateRole"],
+        "name": ["loadIcon"],
+        "src": ["loadIcon"],
+        "icon": ["loadIcon"]
+    }; }
+};
+Icon.style = iconCss;
+
+exports.nano_icon = Icon;

package/dist/cjs/nano-in-page-nav.cjs.entry.js

@@ -53,7 +53,7 @@ const NanoInPageNav = class {
         return node;
     }
     render() {
-        return (renderer.h(index.Host, { key: '5fc7993edd48363da225ffce7e8d3dad8689e761', class: "nano-in-page-nav" }, renderer.h("nav", { key: '4cc75849661bb1e2fd144ac075a693ce9e5af58f', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: '286df7a444423180967750017575414cce154b0d', class: "header" }, renderer.h("slot", { key: '255d81a0c2d26b0069a83a08e552e6afeb035295', name: "back" }), renderer.h("slot", { key: 'c939561b8be1b4a479e1f0c01684f5dd0a3014ce', name: "accessory" }))), renderer.h("div", { key: '411231a64e23575d76722f59446567f5cd68575e', class: "desktop-nav" }, renderer.h("slot", { key: '892a93de5de705e392b687ee62ab89c17bcc349a' })), renderer.h("nano-details", { key: '34d89f9f7927db1cb817124cf0d053f88963484c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+        return (renderer.h(index.Host, { key: '8b88cd04f960c4c8ea7ae2dd79a6ec82694570e6', class: "nano-in-page-nav" }, renderer.h("nav", { key: '4df4a5ef8aecad356c6ad1acd9a6a886edce8139', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: 'ed1315ac689d77ffd4005df5a6eeb01f3fc9f599', class: "header" }, renderer.h("slot", { key: '0db0fb3919268a14fb924b292302c563181e87c0', name: "back" }), renderer.h("slot", { key: '95a5fafda43239ef7cc9208efc254fb335bc9f66', name: "accessory" }))), renderer.h("div", { key: '5a273c033b193efe7d4c72c3ccfdbf30b4442eae', class: "desktop-nav" }, renderer.h("slot", { key: '7d0cff62b54d21daa5b8e7d9551a9d0ed08cfe6f' })), renderer.h("nano-details", { key: 'c337ce8ac65560e5914f8566304f9382540316f2', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
 };
 NanoInPageNav.style = inPageNavCss;

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

@@ -70,7 +70,7 @@ const NanoIncrement = class {
         this.handleSlotChange();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'fab6b5bdecb8ccd3661d7054e08d66a46c2dd0a8', class: "nano-increment" }, renderer.h("div", { key: 'c064903981622ce66ac3a19efce6d595d59b7ed0', class: "root" }, renderer.h("div", { key: '447735cf16956d0ae172cc2bb1b3a7ffffd7fa0c', class: "minus" }, renderer.h("nano-icon-button", { key: '24e73eee061669ea0dd5423bae53886bed60478a', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), renderer.h("slot", { key: '855358fe5a99004f52432dd42cf8c986f67afe69', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '17b1a5d9988023f4869489beffd697f4329a1d61', class: "plus" }, renderer.h("nano-icon-button", { key: '8b2e763e3f871355085e13b20a26f751c153a329', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
+        return (renderer.h(index.Host, { key: '14c12f59b2f00d22bc58fb5ca64616a0a6b19749', class: "nano-increment" }, renderer.h("div", { key: '77800505fe9e0d79fda864dc48cb199e6ea611c7', class: "root" }, renderer.h("div", { key: '01576d846ca2708319d9faf1c7a0a25169f6c3f4', class: "minus" }, renderer.h("nano-icon-button", { key: 'a6b30034c64de602ac504a882aa3ff7c5a933083', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), renderer.h("slot", { key: 'f04566d5f4a52f23a36bfb1c86a8dadfa3638d66', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '4f1e183e7d547d5f72154115300d14cfbbe3d62b', class: "plus" }, renderer.h("nano-icon-button", { key: '20af1b2a19cd8c9264e6375f4a5c05b9f917d979', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
     }
     static get watchers() { return {
         "inputElement": ["inputElementChanged"]

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

@@ -145,7 +145,7 @@ const IntersectionObserve = class {
         this.removeIO();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'be24c77cb033ff3fdb33b37cd8414edd99785795', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'e1cf1e9175a9249c6f6f5b202d27a3f9bf937bac', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (renderer.h(index.Host, { key: 'aadf019427b2d2c3020fd6e667d5932fd14aea45', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'eae74417c304de7b8e377229b603d88468a5c7f5', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],

package/dist/cjs/nano-masked-overflow.cjs.entry.js

@@ -317,7 +317,7 @@ const MaskedOverflow = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '5e3818d9ff886b75194db22fd7f42af484fe17d7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: '991fa196ffc2eb42c907519bb8187f15c9868161', part: "base", class: {
+        return (renderer.h(index.Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -326,12 +326,12 @@ const MaskedOverflow = class {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'e6958d0060691af605afa2c6fd53194b4284f29d', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '167bb7fa1450371ceab4dc8467e5debbd672101f', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), renderer.h("div", { key: '8d8d7c305c0c89738d9660aff6b75ca029506ab7', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: 'fdd83d15c431538a2992887e58aed07e9393d411', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: 'a1fba6d2c2e62e05b5a062c563f22c8e2b0222a4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: 'a6d602d437702479bd67d71bd5ac838d0ae02941', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: '30eae4cf86f7bead75734736b7192420255a64fc', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), renderer.h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

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

@@ -144,14 +144,14 @@ const MenuDrawer = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '39da1804ff710702cacbbadf0d8bb1d47c2d732b', class: {
+        return (renderer.h(index.Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', class: {
                 open: this.open,
                 'secondary-open': this.secondaryOpen,
                 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: '90b0e1a831d49af7d81fe5ca2da977a697c08ee7', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: '37d6443befe1a93169e15a8becbefe974c8a8d1c', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, renderer.h("nav", { key: '7373abf5ec1ef567407abedc4b786ae3d51c9e93', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: '6f243a3de7b59072d43fac86c1d9c8acd62ec9d4', class: "head" }, renderer.h("button", { key: '6bf443330190314bf84583fc540cd2cb821f4f53', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: '87025c0165c2e61bd51724ef15e8e1b110ded3e4', name: "light/arrow-right-to-line" }), renderer.h("span", { key: '6bfd0162936fc4ce0546194a227960ce9dd718a1', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: '07039af321133321dedceaaff462472bd22b4f12' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: '252fe22caae99dc7ba850207a92f9390665bf3c0', class: "foot" }, renderer.h("slot", { key: 'f142bd0852c6fa01fcc3fba2de5528d1d96d03b7', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, renderer.h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, renderer.h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), renderer.h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, renderer.h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]

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

@@ -54,8 +54,8 @@ const Rating = class {
         this.handleShowHideElements();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'fbb60961810fe863ebebc729cbe4ecb955608c82', class: "nano-more-less" }, renderer.h("slot", { key: '6823f661e722640622d421c96244cd4a0eee1953', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            renderer.h("div", { key: '134fadd869470a34cbd21b06d9cc2c85fc4e614c', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: '62544d207ac12171da4905e3006e26113b1b0189', name: "less" }, renderer.h("button", { key: '54badba3d736faf5b2b686ec989998a4319c5001', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (renderer.h(index.Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, renderer.h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            renderer.h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, renderer.h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', 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, ")")))) : (''),
         ]));
     }

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

@@ -195,20 +195,20 @@ const Rating = class {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (renderer.h(index.Host, { key: 'df7dc8a018d6d786e47134a2b9896a4cf2e87074', class: "nano-rating" }, renderer.h("label", { key: '7d9861c77bd39e075b1d9f75b24a5390efcbb42e', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, renderer.h("slot", { key: 'f2406ae04779c885c9968513d4e33d1b00ca8bde', name: "label" }, this.label)), renderer.h("input", { key: '50b8e5c1ef6b55ae88b48e4cf3d3ef83bb6a33f6', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (renderer.h(index.Host, { key: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, renderer.h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, renderer.h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), renderer.h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), renderer.h("div", { key: '1089a70fecbf338efbf3b2f5a8624c2c3c5ce56c', class: "rating-wrap" }, renderer.h("div", { key: '6552b5f9466c1ec0df3e69d9543d693fa90829d4', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), renderer.h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, renderer.h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', 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: '1a741e52552009d9fe705aac22abbfa63b49e196', 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: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', 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: 'd6368fb64cac9837f38bc00a06b63f2ef3ad3a74', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', 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,

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

@@ -228,13 +228,13 @@ const ResizeObserve = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: 'e5019ccd47c55fddcffd4fa5ff151b0d1db5465f', class: {
+        return (renderer.h(index.Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, renderer.h("slot", { key: '6117c97943bf1ca7368946dd17e356e2d866bbf3' }), !!this.notifyContentFit &&
+            } }, renderer.h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (renderer.h("slot", { name: "content-fit-x" })) : (renderer.h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (renderer.h("slot", { name: "content-fit-y" })) : (renderer.h("slot", { name: "content-nofit-y" })),

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

@@ -39,7 +39,7 @@ const Slide = class {
         });
     }
     render() {
-        return (renderer.h(index.Host, { key: 'a426e75ad5b607ac12e53db8183e08f89a10057a', class: "nano-slide" }, renderer.h("slot", { key: '792f06fe463ae49d981d7beceb68e4b7b49beff3' })));
+        return (renderer.h(index.Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, renderer.h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]

package/dist/cjs/{nano-slides-C576PTmo.js → nano-slides-C73bSG0h.js}

@@ -2813,19 +2813,19 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-Cz3eYnOp.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-Bk4jXSN0.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-DIFYejbf.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-gQqOMvpr.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasDotsModule && opts.pageDots) {
-            await Promise.resolve().then(function () { return require('./page-dots-Clb2QknR.js'); });
+            await Promise.resolve().then(function () { return require('./page-dots-BLPta5z5.js'); });
             this.hasDotsModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-BzBFJiQK.js'); });
+            await Promise.resolve().then(function () { return require('./fade-DBuNbJEw.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2960,15 +2960,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: '25fe656149129885383046b7f2cb81ecc965db13', class: "nano-slides" }, renderer.h("div", { key: '84d9f878b91454a12311ffc5203d49a243fb9c66', class: {
+        return (renderer.h(index.Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, renderer.h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: 'b975dcadc6d7b7b5b7e915980527eba3bf740165', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', 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: 'a9b13e8e0c8808617c694953e3fef74a57d719a8' })), renderer.h("div", { key: '9caacd27973cc67740145365ab7a10c75ab44219', class: "ui-extras" }, renderer.h("slot", { key: 'ad80afb5ddbcc54b10310a4e115403fee8dda215', name: "ui" })))));
+            }, part: "slide-container" }, renderer.h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), renderer.h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, renderer.h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],

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

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

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

@@ -728,7 +728,7 @@ const Sortable = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: 'd6d4f0ad6adf2a3f5e1d36b757e116b58e5b55b4', class: "nano-sortable" }, renderer.h("div", { key: 'd2cfcad28acfb052acbc6093dddfc247f5369bcf', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: '079bc29ba8c2f26163b7e3a23f0107f78db7b3fb' })));
+        return (renderer.h(index.Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, renderer.h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],