@nanoporetech-digital/components 8.3.2 → 8.4.1

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

@@ -73,7 +73,7 @@ const GlobalNav = class {
         });
     }
     /**
-     * MyAccount data automatically set via `myAccountUrl`.
+     * MyAccount data is automatically set via `myAccountUrl`.
      * Alternatively you can directly provide a JSON object which is useful for SSR
      * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
      */
@@ -382,7 +382,7 @@ const GlobalNav = class {
     };
     handleSearchCloseEvent = (e) => {
         if (e.target.classList.contains('gn__search-dropdown')) {
-            this.searchBarShown = false;
+            requestAnimationFrame(() => (this.searchBarShown = false));
         }
     };
     handleSearchTermInputEvent = (e) => {
@@ -484,33 +484,34 @@ const GlobalNav = class {
     }
     render() {
         const bpps = this.bpPartials;
-        return (renderer.h(index.Host, { key: 'a11b011a86053bb118d2a2718fde17ba98a818a2', class: {
+        return (renderer.h(index.Host, { key: '3964e8a3aab86d4252876816ca934c69e75da22b', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, renderer.h("div", { key: '883aa872acfdd67b58b11bb6bd36f520e21308a6', class: {
+            } }, renderer.h("div", { key: 'fc2f728b3c4412913ffc2d18c07d057bf6e0bf87', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, renderer.h("nano-drawer", { key: '8eab86995bdb7a64ab20a5922f8fed085c00dd9a', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, renderer.h("div", { key: 'bec24a05669c928f332f52531da350fede81e09b', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: '79ea2417881502eea913922536255ff07a520dec', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, renderer.h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, renderer.h("div", { key: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', renderer.h("slot", { key: '139e672405b09a05784765c02fdcd2937ef72ee8', name: "overflow" }))), renderer.h("div", { key: '52f185901c3d7b53f94fe23598941c836177ca4f', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '8fa34c4322037f38f2804e385c90155ba0cc6566', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '807c175fb7c54c6e88fe03ef13b105b601110fc9', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: '4e524e4266f8b4c980bad91a821da3864d6ef7c5', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: 'cd5251ce86c170167cecc3927caeb3d96c46c038', name: "logo" }, renderer.h("a", { key: 'cba3f5560b1285b99e893adab8df08739d7a55ba', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', renderer.h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), renderer.h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '64acb1e7f44c8931bd928e0c6be01eaf83cf47ff', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: '49dc9cf7e3d75dee49d7a50defde7a260c33f867', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: 'ffb1b38b1e7682ab2fe26d44a0c9686306634197', name: "logo" }, renderer.h("a", { key: 'a8427d3042b4871027a08b5ea993c57659ab12c0', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: '49ee4adade1ad0cda74fbb3fbd210f2469057b3e', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: '5600be22c0fcd69fb51a2e1ee9a5f4b3ea1a8c35', class: "gn__main-menu-actions" }, renderer.h("nano-dropdown", { key: '24eabdc75c19c564382096ca71b7f1f8ad36a3b0', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, renderer.h("nano-icon-button", { key: '458613e1f5e9fe71ba73bc67b30725e3394251ba', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (renderer.h("form", { key: '844fb0cdc10c8c9e1e0e2c9d8a035c4e1e651b7f', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '34493f43a9ce0a4143f2b506d3ff2c5983c0ebf2', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: 'b8f9415058b665e618509e080a8d99de1d6875cf', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
-                this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: 'fdce329dcd11f5fd47b80407cca87e4ba5586b6c', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: '9647d74f50b93ffa2f7164d661382a7ba23a1518', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: 'f0b1bb77607ddbe71fe15a7ec0b4a0211e6c56b9', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: '0c87148566edcae34bfa237cd4fb8a4a8a482ee8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
-            this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
-                    searchInsights.searchInsight.sendClick({
-                        index: this.activeIndex.index,
-                        eventName: 'Global nav quick search - search result clicked',
-                        queryID: this.autocompleteResults.queryID,
-                        objectIDs: [hit.objectID],
-                        positions: [i + 1],
-                    });
-                } }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            renderer.h("nano-option", { key: 'a7b6d4ff2b9d356342bcb2fbbd03356d982953f3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), renderer.h("div", { key: '884fe3776886eaf768355c60ba5a8eb7d41caa54', class: "gn__cart" }, renderer.h("nano-icon-button", { key: '17d8b0611855c47d200504c7885c270f20736109', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (renderer.h("nano-badge", { key: 'e00aed6a3ba8165f56738ab5494fabc66af68381', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: '51d372b7aaa316b4d1ddc945bf0b3c5cdba579af', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: '7af369c343889985cfda4d596576e6ad0913f34c', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: 'f122c285ba5966efe5fdb5698ab759fa89eb9282', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, renderer.h("nano-icon-button", { key: '8fe139d799eeb34b1ff129808338ce8d6304d262', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '95d27edc95e00c96ce9751e9501429e0062bcab6', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '109461b01a0cbd6ee5c0d0120d93802f8b4a2642', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: '81d5c3531557500daebe167defe8b068909ffe9f', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
+                    this.handleSearchTermChangeEvent(e.detail.value);
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: '4c3dc50a07877f4c10bbebe2b91d5cc2a6924aee', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: 'ab9037d4d2c5dc5bca7cdb21ced7a50a5ea181b1', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '794cbd8cc6fd876e931457c93caad690be445400', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'de620a03a8bba906542c10e46d1529f1b6a63327' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+                this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
+                        searchInsights.searchInsight.sendClick({
+                            index: this.activeIndex.index,
+                            eventName: 'Global nav quick search - search result clicked',
+                            queryID: this.autocompleteResults.queryID,
+                            objectIDs: [hit.objectID],
+                            positions: [i + 1],
+                        });
+                    } }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
+                renderer.h("nano-option", { key: '35962d666c2f47c4952f1a06324db3db186a21e1', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), renderer.h("div", { key: '930f8a1adb7566478ec7e9e96b08ecdefecfd4b8', class: "gn__cart" }, renderer.h("nano-icon-button", { key: '76f447b14988391240284c66d1e6e347c8873067', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (renderer.h("nano-badge", { key: '389552b85553b498ce5b799dc182f73933dadc59', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), renderer.h("nano-global-search-results", { key: '3b292618916afe3f08fc456c105df868725ddb26', part: "site-search-results" }, renderer.h("div", { key: '8bb4b9fe8389ac2f4aa2784294fd1bd1f736e9c4', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: 'cf2327c16e479d36cc4f2dcd67d2c026518a3ebc' }))))));
+            : '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), renderer.h("nano-global-search-results", { key: '38b900fdb5dbcd1d24642c8862c320c473de6dc3', part: "site-search-results" }, renderer.h("div", { key: 'b5b824f4a54aa2989ca0a359f7c7b74ae5e6d777', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: '02dd2c08252ba31c972fffe9c956e7ead76f61ef' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const GridItem = class {
      * m-row-start-2
      */
     render() {
-        return index.h("slot", { key: '8df6ce243d4a12c9cfe966f33d70b181eeb84b43' });
+        return index.h("slot", { key: '9a50a1034bd70b2d0c461f01acdb6b0484e492d3' });
     }
 };
 GridItem.style = ":host { display: inline-block; }";

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

@@ -4,133 +4,9 @@
 'use strict';
 
 var index = require('./index-DGttnXif.js');
+var constructibleStyle = require('./constructible-style-BsHBb9au.js');
 var renderer = require('./renderer-B9M1kXq8.js');
 
-// import type { VNode, HTMLStencilElement } from "@stencil/core";
-const supportsConstructibleStylesheets = (() => {
-    try {
-        return !!new CSSStyleSheet();
-    }
-    catch (_e) {
-        return false;
-    }
-})();
-const cacheKeys = new WeakMap();
-/**
- * Dynamically create a constructible stylesheet which is applied to the component.
- * The stylesheet is then cached for future instances of the component.
- * @usage
-As a string:
-```
-@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
-As a function:
-```
-@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
- * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
- * @returns `@ConstructableStyle` decorator
- */
-function ConstructibleStyle(opts = {}) {
-    return (target, propertyKey) => {
-        if (!opts.cacheKeyProperty) {
-            opts.cacheKeyProperty = propertyKey;
-        }
-        const { componentWillLoad, render, componentWillRender } = target;
-        if (!componentWillLoad)
-            console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
-        if (supportsConstructibleStylesheets && true) {
-            const addStylesheet = (instance) => {
-                if (!instance[opts.cacheKeyProperty] ||
-                    (cacheKeys.get(instance) &&
-                        cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
-                    return;
-                cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
-                const host = index.getElement(instance);
-                const cssText = typeof instance[propertyKey] === 'function'
-                    ? instance[propertyKey]()
-                    : instance[propertyKey];
-                const root = (host.shadowRoot || document);
-                root.adoptedStyleSheets = [
-                    ...(root.adoptedStyleSheets || []),
-                    getOrCreateStylesheet(instance, target, cssText, opts),
-                ];
-            };
-            target.componentWillLoad = function () {
-                const willLoadResult = componentWillLoad && componentWillLoad.call(this);
-                addStylesheet(this);
-                return willLoadResult;
-            };
-            target.componentWillRender = function () {
-                const willRenderResult = componentWillRender && componentWillRender.call(this);
-                addStylesheet(this);
-                return willRenderResult;
-            };
-        }
-        else {
-            target.render = function () {
-                const cssText = typeof this[propertyKey] === 'function'
-                    ? this[propertyKey]()
-                    : this[propertyKey];
-                let renderedNode = render.call(this);
-                if (isHost(renderedNode)) {
-                    appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                }
-                else {
-                    renderedNode = index.h(index.Host, null, renderedNode);
-                    if (!('attachShadow' in HTMLElement.prototype)) {
-                        appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                    }
-                    else {
-                        if (!target.__constructableStyle) {
-                            const style = document.createElement('style');
-                            style.setAttribute('type', 'text/css');
-                            style.setAttribute('constructible-style', target.constructor.name);
-                            style.innerHTML = cssText;
-                            target.__constructableStyle = style;
-                            document.head.appendChild(style);
-                        }
-                    }
-                }
-                return renderedNode;
-            };
-        }
-    };
-}
-function appendStyleToHost(node, targetName, cssText) {
-    (getHostChildren(node) || []).push(index.h("style", { type: "text/css", "constructible-style": targetName }, cssText));
-}
-function getOrCreateStylesheet(instance, target, cssText, opts) {
-    if (!target.__constructableStyle) {
-        target.__constructableStyle = {};
-    }
-    const key = instance[opts.cacheKeyProperty];
-    if (!target.__constructableStyle[key]) {
-        target.__constructableStyle[key] = new CSSStyleSheet();
-        target.__constructableStyle[key].replace(cssText);
-    }
-    return target.__constructableStyle[key];
-}
-function isHost(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (node[prop] === index.Host) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-function getHostChildren(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (Array.isArray(node[prop])) {
-                return node[prop];
-            }
-        }
-    }
-}
-
 const gridCss = ":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{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:normal;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;place-items:var(--grid-align-items) var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh;inline-size:100%}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -295,7 +171,7 @@ const Grid = class {
         this.constructSizeArray();
     }
     render() {
-        return (renderer.h(index.Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, renderer.h("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, renderer.h("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (renderer.h("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (renderer.h("div", { class: "grid__helper-item" })))))));
+        return (renderer.h(index.Host, { key: '56ae0bda8aedac96841dd8cf308117ef1aaa9824', class: "nano-grid" }, renderer.h("div", { key: '6fffc201e4261b8f6c458bd044b31fe12cd9045e', part: "grid", class: "grid", "cache-key": this.cacheKey }, renderer.h("slot", { key: 'a6d7473ba9a8ffd21c4df95c2028e67026ffd1a5' })), this.showHelper && (renderer.h("div", { key: '275145f83283b504171fdc973741a1398cca6317', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (renderer.h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],
@@ -316,7 +192,7 @@ const Grid = class {
     }; }
 };
 __decorate([
-    ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
+    constructibleStyle.ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
     __metadata("design:type", Object)
 ], Grid.prototype, "styles", void 0);
 Grid.style = gridCss;
@@ -456,16 +332,16 @@ const Img = class {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (renderer.h(index.Host, { key: '640969f1b1d3872d0314b455fd602be4e68955cc', class: "nano-img" }, renderer.h("div", { key: 'fdc45639dabc5872b5a00e7db92865efd5a2ac77', class: "img" }, renderer.h("div", { key: '5b9cc3e0ef11e3941a6085625b1d9f5e9d6de56a', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (renderer.h("div", { key: 'd8c3a0f6bf742608335189f33ba076d70b08d4a9', class: {
+        return (renderer.h(index.Host, { key: 'f8774fc9ad6e94727378337c2f405a068a7c88fb', class: "nano-img" }, renderer.h("div", { key: '15ae3c8ea944c8f0eab8616194f44fc1033e8fe2', class: "img" }, renderer.h("div", { key: 'ec3f433ded23dcb7fc57e53b0ecaba789ba492e0', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (renderer.h("div", { key: '8f4e8c9d595a31b477b0ae3f9e135f6b5c3f0e69', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, renderer.h("slot", { key: 'ec35744e264cb18d1ec97a4e9c84f0c7a2d80a3e' }))), renderer.h("img", { key: 'be687a80241f559f7df7567854e1a59812437624', class: {
+            }, style: bgStyle }, renderer.h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), renderer.h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), renderer.h("nano-resize-observe", { key: '62398606dab9cc346ffb2acbbb913458684030db', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), renderer.h("nano-resize-observe", { key: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],

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

@@ -96,7 +96,7 @@ const Hero = class {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (renderer.h(index.Host, { key: 'fd48435b9a236d4b0a13853b495fa6e7a17d759f', class: "nano-hero" }, renderer.h("div", { key: '6d4a1d9deb8bdbb1a2c6d55bcedecf03dafbe1d3', class: {
+        return (renderer.h(index.Host, { key: '8270c80717ac41cc4cd5bedb577b131fe01ac967', class: "nano-hero" }, renderer.h("div", { key: '8b04bda451af03b648beb5576cd0badd48364aab', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -107,9 +107,9 @@ const Hero = class {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, renderer.h("div", { key: 'd6b6675e229a107dd71d12e6b5c3b2decd36c86d', class: "hero__bg-wrap" }, !!this.imgSrc && (renderer.h("nano-img", { key: 'eeaa0dce87aedba0e30d3a73ae1bc5732a284732', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, renderer.h(this.HeroContent, { key: 'fe87fdc964d9b97611014a905620d43ef2d9b01d' }))), !this.imgSrc && [
-            renderer.h("div", { key: '74d6e0d9eb61110f8f395258efd2541f795de7f4', class: "hero__bg-slot" }, renderer.h("slot", { key: '125bbc331e99605bd2795a4720c0ca53fb4b1862', name: "background" })),
-            renderer.h(this.HeroContent, { key: '15ff774728e7dd459bbbaab916b0b2577989aac8' }),
+            } }, renderer.h("div", { key: 'be91fa5b23ceddaf411b269eb6635b886c83174d', class: "hero__bg-wrap" }, !!this.imgSrc && (renderer.h("nano-img", { key: '961b0a21220f0305cc0f4a4af0c6cd5e99446c41', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, renderer.h(this.HeroContent, { key: 'b272423beee722ae9d4adc0313d2d9ca4e6e3cd4' }))), !this.imgSrc && [
+            renderer.h("div", { key: 'f10056208ed97f1d4a051572261c874e5dae6e96', class: "hero__bg-slot" }, renderer.h("slot", { key: '225c3a0b114b16e8edb063d6979683b343e85419', name: "background" })),
+            renderer.h(this.HeroContent, { key: '375442509ce1954ca651d56d49488b0da464e577' }),
         ]))));
     }
     static get watchers() { return {