@nanoporetech-digital/components 8.3.2 → 8.4.0

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)
      */
@@ -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: '52758e65d80b4738a7bce1b668ac43a1e573688b', 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: 'b0f7b540dc867775e0ffc484fd00ea4bc76bade6', 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: '8a5cd7bfe4411ced1d5152879f6f22e2414d66f4', 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: '10b6ae8c625aded73f416bc07d1798c3089f2973', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: '9db43ebdd4c691a9cf011352f71de1351d62d84f', 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: '54adcdf273c023af6cb552d4655f422fe40bcc44', name: "overflow" }))), renderer.h("div", { key: '6dc61d4c46eaa60e8c10440c8d16321d44f64193', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '46310206cead5a77fda999eca19b2eab45aef41e', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '066a2fc79c4c395f0938b4ac1eadc40bc6b7895a', 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: 'd5184e70f942f3aaa8d1bdfa9ac9068b3f5e1059', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: 'a8c584d2129fe400546c4795d124f855d091b771', name: "logo" }, renderer.h("a", { key: '2993131b2dbfa68bf0e7327e53d172eff99c5bb1', 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: 'eb403b129ddba684ef45b547dcd86a5128c194fa', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: '61296cf7760ca9b0bad1b39684cd26365a37c4e4', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: 'a2ffb43fb901e508ac465e875be785fb979fb285', 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: 'bdb7b2f8dfdb29644cfca77953043bbce65ba3c4', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '60d01e9911bafbd7967c0c0194c05e3b55f39586', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '5633e3714947ecdb2e1f8bf7b9b829050358db4b', 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: 'e09a08fc9d014f55862ac909ea414db9d987de61', 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: '3d58fed7ebb3c74a2ed9df600c331119e2670425', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: '78befd844999d78365d7b88ad7b03749166c1073', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '4fe00833301ab0553d8a42c7f8a89c2f7dcaa24d', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'e5309556718d0db06c37a9f1286c8b7cc98a12f1' }, "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: 'c134c900ffdd746b3d38bce27ed0d5e6dccbbcf3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), renderer.h("div", { key: '215282e792ec6f14e214ca1177d6a6b6de7ccc44', class: "gn__cart" }, renderer.h("nano-icon-button", { key: '9aa656cd4b12bc09ca8a5e1e727d30c63e60a302', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (renderer.h("nano-badge", { key: '86bbe9468e5e9a7a7d9c3fb3b48c4ba4cdc46131', 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: '1cacccf34009f330acebb1dc0fa492d1f3ed8dff', part: "site-search-results" }, renderer.h("div", { key: '7891bf3d5c5c3a8288583cbbc24a25f06949609e', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: '9998fe23791e35ca762f2f1bfb54617a1d0156de' }))))));
     }
     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 {

package/dist/cjs/{nano-icon_3.cjs.entry.js → nano-icon-button_2.cjs.entry.js}

@@ -7,323 +7,6 @@ var index = require('./index-DGttnXif.js');
 var renderer = require('./renderer-B9M1kXq8.js');
 var popover = require('./popover-BxNxwqMv.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) {
-        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: '754a53ed280fd9bcb1dcbec89eba4180f491d1b8', 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;
-
 const iconButtonCss = ":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{--border-radius:none;--active-color:var(--nano-color-neutral-800);--hover-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-xs);--box-shadow:none;--button-bg:transparent;color:currentcolor;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:inherit;font-size:inherit;color:inherit;padding:var(--padding);cursor:pointer;appearance:none;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color)}.icon-button:focus-visible:not(.icon-button--disabled){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.icon-button__label{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}:host([disabled]:not([disabled=false])){opacity:0.5;cursor:not-allowed}.icon-button--disabled{pointer-events:none}";
 
 const IconButton = class {
@@ -638,10 +321,10 @@ const Tooltip = class {
             this.popover.destroy();
     }
     render() {
-        return (renderer.h(index.Host, { key: '88500e56b7cc79e344604bfb9ffc54f2c7884c16', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: '6ff00a2034648eb7cde6bb7e7ba1bc0dcf611238', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: 'e278b67db89953ef0a174b50f5aa28e101e8e83d', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: '226bc518e38502e1a864c26a265abb01cfdb918e', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (renderer.h(index.Host, { key: '94758bb18228b14884cf2be79228e554de84013f', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: '45589386e68d89c21abbb50513678152e8bce9d1', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '6a76c101c35d45458f0a680753a381cc95631b87', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: 'd3b2cc9c9018c9a0a5dc4cef256c8b9c568cd0b4', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: '6245d2904946b690c9c3ea4e902fa5d789473110', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '8ddc4c34d70107ade21b7b53827d3c37e6744d2e', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: '1c51cdc6a7ec88107e3290b0b9750198e7176c20', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: '00f090eee000e6bba713dc21a1d53c348eb94a76', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],
@@ -650,6 +333,5 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-exports.nano_icon = Icon;
 exports.nano_icon_button = IconButton;
 exports.nano_tooltip = Tooltip;