@nanoporetech-digital/components 7.6.0 → 7.7.0

package/hydrate/index.js

@@ -133,34 +133,36 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 const NAMESPACE = 'nano-components';
 const BUILD = /* nano-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, constructableCSS: false, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
-if (globalThis.window &&
-    'MutationObserver' in globalThis.window &&
-    globalThis['document']) {
-    // fire global 'ready' event when everything is hydrated
-    const docEle = document.documentElement;
-    const docIsReady = () => {
-        if (!docEle.classList.contains('hydrated'))
-            return false;
-        docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));
-        return true;
-    };
-    if (!docIsReady()) {
-        let mutationO = new MutationObserver((_) => {
-            if (!docIsReady())
-                return;
-            mutationO.disconnect();
-            mutationO = null;
-        });
-        mutationO.observe(docEle, {
-            childList: false,
-            subtree: false,
-            attributes: true,
+var appGlobalScript = async () => {
+    if (globalThis.window &&
+        'MutationObserver' in globalThis.window &&
+        globalThis['document']) {
+        // fire global 'ready' event when everything is hydrated
+        const docEle = document.documentElement;
+        window.addEventListener('appload', () => {
+            docEle.classList.add('hydrated');
         });
+        const docIsReady = () => {
+            if (!docEle.classList.contains('hydrated'))
+                return false;
+            docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));
+            return true;
+        };
+        if (!docIsReady()) {
+            let mutationO = new MutationObserver((_) => {
+                if (!docIsReady())
+                    return;
+                mutationO.disconnect();
+                mutationO = null;
+            });
+            mutationO.observe(docEle, {
+                childList: false,
+                subtree: false,
+                attributes: true,
+            });
+        }
     }
-}
-
-const globalFn = () => { };
-var appGlobalScript = globalFn;
+};
 
 const globalScripts = appGlobalScript;
 
@@ -438,7 +440,7 @@ var uniqueTime = (key, measureText) => {
     };
   }
 };
-var h = (nodeName, vnodeData, ...children) => {
+var h$1 = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
   let slotName = null;
@@ -540,7 +542,7 @@ var convertToPrivate = (node) => {
     if (node.vname) {
       vnodeData.name = node.vname;
     }
-    return h(node.vtag, vnodeData, ...node.vchildren || []);
+    return h$1(node.vtag, vnodeData, ...node.vchildren || []);
   }
   const vnode = newVNode(node.vtag, node.vtext);
   vnode.$attrs$ = node.vattrs;
@@ -1949,7 +1951,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost$1(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const rootVnode = isHost$1(renderFnResults) ? renderFnResults : h$1(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
@@ -2745,14 +2747,14 @@ var hAsync = (nodeName, vnodeData, ...children) => {
     const flatChildren = children.flat(Infinity);
     if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
-        return h(nodeName, vnodeData, ...resolvedChildren);
+        return h$1(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
-        return h(nodeName, vnodeData);
+        return h$1(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...flatChildren);
+    return h$1(nodeName, vnodeData, ...flatChildren);
   }
-  return h(nodeName, vnodeData);
+  return h$1(nodeName, vnodeData);
 };
 function proxyHostElement(elm, cstr) {
   const cmpMeta = cstr.cmpMeta;
@@ -3230,6 +3232,40 @@ var Build = {
 };
 var styles = /* @__PURE__ */ new Map();
 
+/* eslint-disable @typescript-eslint/no-namespace */
+/**
+ * Transforms a tag name by adding a prefix if it's a custom element
+ * @param tag
+ * @returns the transformed tag
+ */
+function transformTag(tag) {
+    if (!tagPrefix)
+        return tag;
+    const isMyCustomElement = tag.startsWith('nano-');
+    return isMyCustomElement ? `${tagPrefix}-${tag}` : tag;
+}
+/**
+ * Augment Stencil's `h()` function to add a tag prefix
+ * @param args incoming JSX arguments
+ * @returns the result of the original `h()` function
+ */
+function h(...args) {
+    const tagName = args[0];
+    if (!tagName || typeof tagName !== 'string' || !tagPrefix) {
+        return hAsync(...args);
+    }
+    let newTagName = tagName;
+    if (typeof tagName === 'string') {
+        newTagName = transformTag(tagName);
+    }
+    const arr = args.slice(2);
+    const tuple = [newTagName, args[1], arr];
+    return hAsync(...tuple);
+}
+let tagPrefix = '';
+(function (h) {
+})(h || (h = {}));
+
 var NODE_TYPE;
 (function (NODE_TYPE) {
     NODE_TYPE[NODE_TYPE["ElementNode"] = 1] = "ElementNode";
@@ -3353,8 +3389,8 @@ class Accordion {
     color;
     onToggleHandler(event) {
         event.stopPropagation();
-        const items = getDirectChildren(this.el, 'nano-details') ||
-            this.el.querySelectorAll('nano-details');
+        const items = getDirectChildren(this.el, transformTag('nano-details')) ||
+            this.el.querySelectorAll(transformTag('nano-details'));
         items.forEach((item, i) => {
             if (item !== event.target)
                 item.open = false;
@@ -3369,10 +3405,11 @@ class Accordion {
         this.nanoToggle.emit();
     }
     render() {
-        return (hAsync(Host, { key: '04218d48d43e211e98c808e19308f5ff530616f1', class: {
+        return (h(Host, { key: '60b444ced7959370455b575616c5e0cfe45ae85d', class: {
                 ...createColorClasses(this.color),
                 [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number',
-            } }, hAsync("slot", { key: '47208f8dd5405fb037ead669df2da04fb38fdf77' })));
+                'nano-accordion': true,
+            } }, h("slot", { key: '53cb7e62571e9bc8e88a958a4b1a62550c4d797c' })));
     }
     static get style() { return NanoAccordionStyle0; }
     static get cmpMeta() { return {
@@ -3814,7 +3851,7 @@ class Alert {
                 this.isToast = false;
                 resolve();
                 // Remove the toast stack from the DOM when there are no more alerts
-                if (!toastStack.querySelector('nano-alert')) {
+                if (!toastStack.querySelector(transformTag('nano-alert'))) {
                     toastStack.remove();
                 }
             };
@@ -3908,28 +3945,28 @@ class Alert {
         }
     }
     Panel = () => {
-        return (hAsync("div", { ref: (div) => (this.panel = div), part: "panel", class: {
+        return (h("div", { ref: (div) => (this.panel = div), part: "panel", class: {
                 alert: true,
                 'alert--open': this.open,
                 'alert--toasty': this.isToast,
                 'alert--modal': !!this.isModal,
                 'alert--showing': this.isShowing,
                 'alert--nodismiss': this.noDismiss,
-            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, hAsync("div", { class: "alert__content" }, hAsync("div", { part: "icon", class: "alert__icon" }, hAsync("slot", { name: "icon" })), hAsync("div", { part: "message", class: "alert__message" }, hAsync("slot", null)), this.closable && (hAsync("div", { class: "alert__close" }, hAsync("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), hAsync("div", { class: "alert__footer" }, hAsync("slot", { name: "footer" }))));
+            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__content" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("div", { class: "alert__close" }, h("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), h("div", { class: "alert__footer" }, h("slot", { name: "footer" }))));
     };
     render() {
-        return (hAsync(Host, { key: '15bcc286efac5acab202d218203baee6737f385b', class: { ...createColorClasses(this.color) }, showing: this.isShowing }, this.isModal && [
-            hAsync("div", { key: '22b78d8f7a22394f70c9d1457fb2dc5ec4b2556f', part: "overlay", class: {
+        return (h(Host, { key: '0279c18aae2396ad177089cc75566e883d90e13c', class: { ...createColorClasses(this.color), 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
+            h("div", { key: 'bf3e853b342bdd95fa760ce9318c280fc7763ac6', part: "overlay", class: {
                     alert__overlay: true,
                     'alert__overlay--open': this.open,
                 }, ref: (div) => (this.overlay = div) }),
-            hAsync("div", { key: 'f3fcf43f5c7dc42aa7bd9dd5cac214044af5f4f5', class: "alert__modal-wrap", onClick: (e) => {
+            h("div", { key: 'e1834c979a55eff1022d7c768d5d1f698afcfade', class: "alert__modal-wrap", onClick: (e) => {
                     if (!e.target.classList.contains('alert__modal-wrap'))
                         return;
                     this.noDismiss = true;
                     setTimeout(() => (this.noDismiss = false), 250);
-                } }, hAsync(this.Panel, { key: '2a3dc3e67dcfd71a739652337f6384d55bd2247e' })),
-        ], !this.isModal && hAsync(this.Panel, { key: '588ba40ffe5e9ba4d5b41838bda0c4f2ea11ea40' })));
+                } }, h(this.Panel, { key: 'd30e62e22c1ea9b97b57590d9fe926bb0623b893' })),
+        ], !this.isModal && h(this.Panel, { key: 'cd72c23c11e27ea221ca7ab3327288f34cd8a597' })));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -6644,7 +6681,7 @@ class Algolia {
     // a child nano-algolia-... updated their template
     onAllTplUpdate(ev) {
         ev.stopPropagation();
-        if (ev.target.tagName === 'NANO-ALGOLIA-RESULTS') {
+        if (ev.target.tagName.toLowerCase() === transformTag('nano-algolia-results')) {
             requestAnimationFrame(() => {
                 this.nanoNewResults.emit(this.indexResults);
             });
@@ -7049,7 +7086,7 @@ class Algolia {
         this.placedAlgoliaEles = [];
         // take out children algolia elements 'cos they have their own templates
         // don't want to swap in their templates
-        Array.from(tmpCont.querySelectorAll('nano-algolia, nano-algolia-filter, nano-algolia-results')).forEach((el, i) => {
+        Array.from(tmpCont.querySelectorAll(`${transformTag('nano-algolia')}, ${transformTag('nano-algolia-filter')}, ${transformTag('nano-algolia-results')}`)).forEach((el, i) => {
             const placeholder = document.createElement('div');
             placeholder.dataset.placeholderId = i.toString();
             placeholder.classList.add('nano-ele-placeholder');
@@ -7092,12 +7129,13 @@ class Algolia {
                 this.tpl = this.tplSlot.innerHTML || this.tplSlot.innerText;
             // get input field to listen to
             if (this.slottedInput &&
-                (this.slottedInput.tagName.toLocaleLowerCase() === 'nano-input' ||
+                (this.slottedInput.tagName.toLocaleLowerCase() ===
+                    transformTag('nano-input') ||
                     this.slottedInput instanceof HTMLInputElement)) {
                 this.inputField = this.slottedInput;
             }
             else if (this.slottedInput) {
-                this.inputField = this.slottedInput.querySelector('nano-input, input:not([type="radio"]):not([type="checkbox"])');
+                this.inputField = this.slottedInput.querySelector(`${transformTag('nano-input')}, input:not([type="radio"]):not([type="checkbox"])`);
             }
             else
                 this.handleListenToChange();
@@ -7136,13 +7174,14 @@ class Algolia {
             globalStoreMethod: this.storeMethod,
             isLoading: this.isLoading,
         };
-        return (hAsync(Host, { key: '9e96beac280ce103622504b8186522285c369fca', class: {
+        return (h(Host, { key: 'f0ae1895d779c2a59dd459fbc7cde8780b1ac9f8', class: {
                 'show-results': this.showResults,
                 'is-loading': this.isLoading,
-            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (hAsync("div", { key: 'fb200e94b822d8072adc37c14e94c42ee69028dc', hidden: !this.isLoading }, hAsync("slot", { key: '45f7f92069bb492ae8dd787b3e83426b7f9c1a67', name: "loader" }))), !this.hasLoadSlot && (hAsync("div", { key: '5a66a1a9c6dbc2965a67e83a807257fcc348ba07', class: {
+                'nano-algolia': true,
+            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (h("div", { key: '15e48727d32a3afa360fec13edb8aca3d211737c', hidden: !this.isLoading }, h("slot", { key: 'a5ec5e6a5ec997540d2dd60fd95a8c82c0c506c2', name: "loader" }))), !this.hasLoadSlot && (h("div", { key: '96275ed0b3486691bc9f5154f5f115cd09274990', class: {
                 loader: true,
                 loading: this.isLoading,
-            } }, hAsync("nano-spinner", { key: 'e75ce7f85cbf9f2fa016361180eff76b8c96e6c3', overlay: true, type: "circle" }))), hAsync(Universe.Provider, { key: 'ecd4ca9daa783e552fc3d3443f788fabb4ace134', state: wormholeState }, hAsync("slot", { key: 'db8aef0eae72cfc5613d7036becc1595339fe21e', name: "search-input" }), hAsync("div", { key: '0fe521a17f50dd75287d43cf7a379097d3c6b1e9', class: "results-container", "aria-live": "polite" }, hAsync("div", { key: '626bee023688d6ca0681112745df27a7e30d6897', ref: (div) => (this.resultsDiv = div), class: "results" }, hAsync("slot", { key: '291df11fc50a7ea922d81996b3030821e48e3c35', name: "output" })))), hAsync("div", { key: 'dfa8adf214d0a2b7654e762000903ab139893e96', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, hAsync("slot", { key: 'f21a7068987d669a1ee910b1ea8a1d3a48ace767' }))));
+            } }, h("nano-spinner", { key: 'd2b86328009cfdb943c5d702e55e9c51ae569f9d', overlay: true, type: "circle" }))), h(Universe.Provider, { key: 'e3465b7980720e2be4d481b7e71a7a033fe52ae1', state: wormholeState }, h("slot", { key: '161554c21e77aa7e662491e787c69d402d00035f', name: "search-input" }), h("div", { key: '4f1c30d75e84a609fc621afce96233bfd678518f', class: "results-container", "aria-live": "polite" }, h("div", { key: '1bce8a2a0c2cd7f71f64750f7c18ff63aefeadd1', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '70582027504c1d2cba99f80e99d51d711247d0ab', name: "output" })))), h("div", { key: 'd4fcea375a1c86191135ba43f85e66e93b076d63', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: '7e291158dfbcb83181bb91e0506eb0a1b6cfb13b' }))));
     }
     static get watchers() { return {
         "listenTo": ["handleListenToChange"],
@@ -7478,9 +7517,10 @@ class AlgoliaFilter {
             this.showFilter = true;
     }
     render() {
-        return (hAsync(Host, { key: '7fceca55176bed53e7b205f9a76d7756d77d1525', class: {
+        return (h(Host, { key: '81d343828cf739b8e85cab7f56fa48ad1c3fc34e', class: {
                 'show-filter': this.showFilter,
-            } }, hAsync("div", { key: '9a4de79e4b28d167a4dd1ff2d92381e2a2e942a7', ref: (div) => (this.outputEle = div) }, hAsync("slot", { key: '112ec321906665e4ba7b3e0c8377bfb49d12b6de', name: "output" }))));
+                'nano-filter': true,
+            } }, h("div", { key: '909831f2c2e4605163227a188df31b3b130fd7d1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '854cff616358aaee8cb6594db55a4a49d4322b74', name: "output" }))));
     }
     static get watchers() { return {
         "value": ["valueSet"],
@@ -7579,9 +7619,9 @@ class AlgoliaPagination {
         this.updateContent();
     }
     render() {
-        return (hAsync(Host, { key: '3168d162f59e4a753d3b1c1557ccdd502de66cbb', class: {
+        return (hAsync(Host, { key: '12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8', class: {
                 'show-pagination': this.show,
-            } }, hAsync("div", { key: 'e90d2eeaef3131be78bb6bebfd4e62c3e2abf708', ref: (div) => (this.outputEle = div) }, hAsync("slot", { key: '36e2f104745f285da532c099c863a6ac48e3f265', name: "output" }))));
+            } }, hAsync("div", { key: '70dc4683c476084346dc69246acb2092719d0b60', ref: (div) => (this.outputEle = div) }, hAsync("slot", { key: '04f51858db37f6a25cae5fead48c5016a4159944', name: "output" }))));
     }
     static get watchers() { return {
         "currentPage": ["currentPageChange"],
@@ -7815,9 +7855,10 @@ class AlgoliaResults {
         }
     }
     render() {
-        return (hAsync(Host, { key: '4147d35d40d51e93ad297d55b78c7cb19b6b20c1', class: {
+        return (h(Host, { key: 'e5124d09c5619d77f6debca38bd5059ecfb9dce5', class: {
                 'show-results': this.showResults,
-            } }, hAsync("div", { key: '354c9705a9650c00ab1e4787cf4ff9673d47e6bf', class: "default" }, hAsync("slot", { key: 'afc1b38a92df5498f471e09137e214899c93b99a' })), hAsync("div", { key: '904cf500535009e93fff280964c57f7b00f5c9bd', ref: (div) => (this.outputEle = div) }, hAsync("slot", { key: '46724c1448e12efab63f79d29dfff8d45be29150', name: "start-output" }), hAsync("slot", { key: '14f524dae0de0418dbc34dbe0878552a36876173', name: "result-output" }), hAsync("div", { key: '065e03e12a29882464e89ec74664eb2613c60ebf', ref: (div) => (this.infiniteScrollBar = div) }), hAsync("slot", { key: 'ee51e59caa058ba382c1e361f1d538b863ff2a6d', name: "end-output" }))));
+                'nano-results': true,
+            } }, h("div", { key: '773924ac30cd4e8c57d6767f96a8c9173d6e9ec6', class: "default" }, h("slot", { key: '5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d' })), h("div", { key: '3a716202a7364efa1eeb90ea525670c4da5fc7e1', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'af5860bd4dc7e2472d18f1b86175f5772bac426b', name: "start-output" }), h("slot", { key: '7b57ec404897b71f60a06ca661558624d5db1ac0', name: "result-output" }), h("div", { key: 'cff39c4ed229e1081f9160d8a447d56841209b4e', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: '79c19d45895d5f7a285e0beb640f84251d37b558', name: "end-output" }))));
     }
     static get watchers() { return {
         "results": ["addContentIndex", "resultsChange"],
@@ -7954,10 +7995,10 @@ class Checkbox {
             const form = this.host.closest('form');
             let ctrls;
             if (form) {
-                ctrls = Array.from(form.querySelectorAll(`nano-checkbox[name="${this.name}"]`));
+                ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
             }
             else {
-                ctrls = Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
+                ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
             }
             ctrls.map((el) => {
                 if (el !== this.host)
@@ -8136,14 +8177,14 @@ class Checkbox {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (hAsync(Host, { key: '6afed2e718ea4744a7f9dfccab87bb1db2d4586a', class: { ...createColorClasses(this.color) } }, hAsync("label", { key: 'f5686febf4252f257c8351f88c76c7d9e5930a53', class: {
+        return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, hAsync("input", { key: '37d6990dcea78794d01739627a68dc252c5e6c6e', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), hAsync("span", { key: '17ef69fb920d6d6f8524c1fe8dc2d0b7e0ce66d0', class: 'nanocb__input nanocb__input--' + this.type }), hAsync("div", { key: '369c14311913bdc03660271c86d41173b27c135b', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && hAsync("span", { key: '52356a0bad26c8f505ffe9992e58e4eba8a6839a' }, this.label), hAsync("span", { key: 'd049601e083379e90a65df3ecd309ae1ed731399', hidden: this.label && !!this.label.length }, hAsync("slot", { key: 'ded4ae2eac621e6811d2155702bdd916551b7a84' }))))));
+            }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
@@ -8346,6 +8387,7 @@ class CheckboxGroup {
         if (!this.checkboxes?.length)
             return;
         this.checkboxTypes = getClassMap(this.checkboxes.map((cb) => 'types-' + (cb.type || 'checkbox')));
+        this.checkboxTypes['nano-checkbox-group'] = true;
     }
     handleDisabledChange() {
         if (this.disabled === null || !this.checkboxes?.length)
@@ -8380,7 +8422,7 @@ class CheckboxGroup {
         mo.observe(this.host, { childList: true });
     }
     async handleSlotChange() {
-        this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));
+        this.checkboxes = Array.from(this.host.querySelectorAll(transformTag('nano-checkbox')));
         this.hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
         this.nativeCbs = await Promise.all(this.checkboxes.reduce((acc, cb) => {
             acc.push(cb.getInputElement());
@@ -8447,10 +8489,10 @@ class CheckboxGroup {
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (hAsync(Host, { key: 'ee4778e9b98cd0402c3bed1420c44d2a44fb30ed', class: this.checkboxTypes }, hAsync("fieldset", { key: '2252a155b753a3f5924e5d73bdac04de56a19e10', disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, hAsync("legend", { key: 'ea26ee6569d03eb540c4d099e1133ab820c8b27a', id: legendId, class: {
+        return (h(Host, { key: '93c54171d768c6ef41eeb1d7e24b8d80c83af780', class: this.checkboxTypes }, h("fieldset", { key: '24457a9b9d1d5993eb2a6c78f2d39e057be99a2f', disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { key: '1e443d6d7970c8c3c8e03dbdc470d8cbf8ab60d2', id: legendId, class: {
                 nanogroupcb__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, hAsync("slot", { key: '14f058c634da09e7b458192845ed6a86c9c9c1f2', name: "legend" }, this.legend)), hAsync("div", { key: 'dc6386736f54d6827b7f670279e37df572920618', class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, hAsync("slot", { key: 'c069527308c2b29d583818da1e43a1fad7792c21' })), (this.showInlineError || this.hasHelperSlot) && (hAsync("div", { key: '243addf0ebfa9029fc0d2a5821dab2c85c707831', class: "nanogroupcb__more", id: moreId }, this.showInlineError ? (hAsync("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), hAsync("div", { key: 'ea4892a826220bce2acef5508163a8a0a9248155', class: "nanogroupcb__help" }, hAsync("slot", { key: 'f01808e9b52b79cf52c8f1b2412f9bef4c79183b', name: "helper" })))))));
+            } }, h("slot", { key: 'fc853be6da9fe11a8f2e82f5d3c458587227a8be', name: "legend" }, this.legend)), h("div", { key: 'f5f0ffae9ae4987cfdb3bad2ccf92c3334d08895', class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '559dba12b4fe7ec3b791986487a3c3615c6a3a11' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: 'a1e9ce7fc24ec31ea12211073700670f08eb9f04', class: "nanogroupcb__more", id: moreId }, this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { key: 'bb8bddba4822fe404c336b4c742c2865ff58c9d1', class: "nanogroupcb__help" }, h("slot", { key: '22e8b1b90d45bf6883a291239d01b8dc90c9b4d9', name: "helper" })))))));
     }
     static get watchers() { return {
         "value": ["handleValuePropChange"],
@@ -8504,7 +8546,7 @@ function getActiveElement(root = document) {
     }
 }
 
-const datalistCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";
+const datalistCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";
 var NanoDatalistStyle0 = datalistCss;
 
 function findLabel(formCtrl) {
@@ -8620,7 +8662,7 @@ class DataList {
     // State change watchers
     async watchInputChange() {
         let nanoInput;
-        if ((nanoInput = this.host.closest('nano-input'))) {
+        if ((nanoInput = this.host.closest(transformTag('nano-input')))) {
             this.isNanoInput = true;
             this.connectedInput = await nanoInput.getInputElement();
         }
@@ -8649,7 +8691,7 @@ class DataList {
                 this.mo.disconnect();
                 this.mo = undefined;
             }
-            const previousOptions = this.host.querySelectorAll('nano-option');
+            const previousOptions = this.host.querySelectorAll(transformTag('nano-option'));
             // add imperative `options`
             writeTask(() => {
                 // clear all previous
@@ -8657,7 +8699,7 @@ class DataList {
                     previousOptions.forEach((internalOpt) => internalOpt.remove());
                 this.allOptEles = this.options.flatMap((option, i) => {
                     if (option.value || option.label) {
-                        const opt = Object.assign(document.createElement('nano-option'), {
+                        const opt = Object.assign(document.createElement(transformTag('nano-option')), {
                             label: option.label,
                             value: option.value,
                             ariaPosinset: i,
@@ -8706,7 +8748,7 @@ class DataList {
     }
     manageInputEvents(newInput, oldInput) {
         if (oldInput) {
-            const nanoInput = oldInput.closest('nano-input');
+            const nanoInput = oldInput.closest(transformTag('nano-input'));
             if (nanoInput) {
                 nanoInput.removeEventListener('nanoChange', this.inputChange);
             }
@@ -8723,7 +8765,7 @@ class DataList {
             });
         }
         if (newInput) {
-            const nanoInput = newInput.closest('nano-input');
+            const nanoInput = newInput.closest(transformTag('nano-input'));
             if (nanoInput) {
                 nanoInput.addEventListener('nanoChange', this.inputChange);
             }
@@ -8855,7 +8897,7 @@ class DataList {
     }
     // Event handlers
     removeEventListeners(oldInput) {
-        const nanoInput = oldInput.closest('nano-input');
+        const nanoInput = oldInput.closest(transformTag('nano-input'));
         if (nanoInput) {
             nanoInput.removeEventListener('nanoChange', this.inputChange);
         }
@@ -8866,7 +8908,7 @@ class DataList {
     }
     processSlottedContent() {
         requestAnimationFrame(() => {
-            this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));
+            this.allOptEles = Array.from(this.host.querySelectorAll(transformTag('nano-option')));
             this.hasNoResult = !!this.host.querySelector('[slot="no-result"]');
             if (this.connectedInput?.value.length && this.type !== 'select') {
                 this.inputChange();
@@ -9025,18 +9067,18 @@ class DataList {
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (hAsync(Host, { key: '468c4a8057baabdb5429ff7200b127d168cafbc2', role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '967dd82369e855a7f9edf70cb17737d36efc1828', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, hAsync("nano-dropdown", { key: '16736f4c8ca46fc4bd8cc76374f0b9adf5f8f1d3', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'd98ed992c76129d5f1a1b5cb3c2a7e4c0c385118', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, hAsync("nano-menu", { key: 'd136b8dcabbcf5f122643bea5b8fb42d0a8fa973', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'b06ac3c64408a331819e3326fb72adfdf5c07b91', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, hAsync("slot", { key: 'fe02ef6eb30a64537e70e98091070e4e39470e37', name: "list-top" }), hAsync("slot", { key: 'bf39b92e5ab2832b657fe4613c9e53c2cf9c98b9' }), hAsync("slot", { key: 'b452641ee00db203fe7c4f34ca9f124eb4dbd600', name: "internal-opts" }), hAsync("slot", { key: '276ef711161276042262bff741111130462c97cc', name: "list-bottom" })), hAsync("nano-menu", { key: '998a3e84c5987663bb85a25a94fbdfed54d6deb9', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: '58683fab717385e8dff20602683964327093f660', name: "list-top" }), h("slot", { key: '949fb5e02b13f878cde4d90a9848fcb18b35ea2c' }), h("slot", { key: 'ed9bccc1520dc103e1673fae32094b05245ab704', name: "internal-opts" }), h("slot", { key: 'aca33681c6282a17386c9934b93cfce6622c08e1', name: "list-bottom" })), h("nano-menu", { key: '4de595aded1e1f586a8d11d21bf6151758da9f9d', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, hAsync("slot", { key: '9151e7b9b8935bbfc8bf26924cd0c0fe8e0ffcf5', name: "no-result" })), !!this.actvOptEles && (hAsync("div", { key: 'c9a63414caf5f60ee0f277f8c483b68ad93cf28c', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '0da09df34253d8bd83bdd263e25f40b9075d30a7', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'ee9d3f67a82cc6a2e0c25efb0c79e031995d0587', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -9291,7 +9333,7 @@ function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
     return getDaysInRange(start, end);
 }
 
-const dateInputCss = ".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
+const dateInputCss = ".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input .nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input .nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
 var NanoDateInputStyle0 = dateInputCss;
 
 const DateRegxps = {
@@ -9709,10 +9751,10 @@ class DateInput {
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (hAsync(Host, { key: '75a51cffff8bd7694357a735f9dd012868ea99cb', class: { ...createColorClasses(this.color) } }, hAsync("div", { key: '186f62ace85c595a010183f2e1ebb8236258c667', class: "date-field" }, hAsync("nano-input", { key: '289843147a7e45a6f247387de8015bb947cc07c8', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, hAsync("slot", { key: '8bc0c704702a80c275d1a5b76cb42a6d7b8b2df0', name: "start", slot: "start" }), hAsync("slot", { key: 'fdc9fda3ff3baefbb5d02effaee0c6c148945f62', name: "label", slot: "label" }), hAsync("slot", { key: 'c02edaebfdfc5d4aba3ec1e1051616916a8eac58', name: "end", slot: "end" }), this.picker && [
-            hAsync("button", { key: '06f3ea71fa51bc7def435751e99e34d8fe6fd517', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, hAsync("nano-icon", { key: '855855dd2b470034f1f0649d551f6bde24495759', name: "light/calendar-days" })),
-            hAsync("nano-dropdown", { key: '295c4970f7682deab9d29655698855a058d9f792', slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, hAsync("div", { key: 'bbcb9f11652e7a387ceb3e9cbbc0503db7f68a2b' }, hAsync("div", { key: '7972c2723037f1d71463bc6460e430a0a6d3247e', class: "date-field__close-bar" }, hAsync("button", { key: 'a7483ee7bd298e71140ce940c362d92ebbf2a0be', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, hAsync("nano-icon", { key: 'd5a24fc0a906030b9fc3681d3c3f82b430a34155', name: "light/xmark" }), hAsync("span", { key: 'b872af1691426cd4bc72d97ac6416943c9997595', class: "vhidden" }, "Close window"))), hAsync("nano-date-picker", { key: '478ab7f225b248cffe02a7028ab86f18fbcc6305', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (hAsync("span", { key: 'af00a354a03feda335927e3b5c09d7f8125ed28b', slot: "helper" }, hAsync("span", { key: '48c263e25633114dba5ef95acc0c0edf1cb0cc26', class: { vhidden: !!this.value.length } }, hAsync("slot", { key: '9668c0d42e23be2919f65a49d7c449500b10fa71', name: "helper" })), this.helperText && !!valueDate && (hAsync("span", { key: '9dc90666e9dfe1dbd9a0281d50a1d1034c150b1c' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), hAsync("input", { key: '1759bbbfe0949d18ef576aa2c79aa4e4d7b8777e', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: '10cc3a473bcaabed644824018630e99a1dc97285', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '16632dc366bed7fff25941bb12ba022b126397e6', class: "date-field" }, h("nano-input", { key: '3e6909fd765bd1ed73231fa8be5a061a8a1e032f', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '14bb7aa556675be2c7b94d1e1dd3ec4a1d9c1b2d', name: "start", slot: "start" }), h("slot", { key: '115fc589b717c7ab2e374d03dc6f4015907b44dd', name: "label", slot: "label" }), h("slot", { key: '2d86afd1e8e25ef60568cdb8b3b9e41793ae0a66', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: '741cf88ae3c4deebb58d815c053e90de4bc53d9d', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '1706c0202aacb50e29bd77d6a21896bb0b0b18a6', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: '0a9acac249c9056d89ee07df62059e04fbc5195f', slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: '41d05ebd55994d7cf036ed9ed03e914a53f61142' }, h("div", { key: '86175e0f4ce2278ef73cb203d1ff98a9debaf2fa', class: "date-field__close-bar" }, h("button", { key: '4a2fcac03a395e0debe269477c6af1d070dc17a3', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ff0cdb92aaa76e6a1fb73707034a24266ea63fdf', name: "light/xmark" }), h("span", { key: '63a11831d86b83d38e598d148900da95fc1ef9f6', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: '870ab0597d916e7a75903cf5e41b3654bc6fa578', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'bb51d81e5b6a1bba76687a463b43466584ccde09', slot: "helper" }, h("span", { key: '1b9ba5f2b56bb3fab5cbbda97657395eb01668df', class: { vhidden: !!this.value.length } }, h("slot", { key: 'f2cdaf86b02a54d5ef47185802df2787b0ad3fc0', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'c90b4d9d6e687f492feeeef14f3a556ccaec2d62' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '70cf184aa59cb0893ad4acc55554a63a7fa45bcf', type: "hidden", value: this.value, name: this.name }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange", "testDateValidity"],
@@ -9831,7 +9873,7 @@ const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigati
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (hAsync("button", { class: {
+    return (h("button", { class: {
             'duet-date__day': true,
             'is-outside': isOutsideRange,
             'is-disabled': isDisabled,
@@ -9841,8 +9883,8 @@ const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigati
                 focusedDayRef(el);
             }
         } },
-        hAsync("span", { "aria-hidden": "true" }, day.getDate()),
-        hAsync("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
+        h("span", { "aria-hidden": "true" }, day.getDate()),
+        h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
 };
 
 function chunk(array, chunkSize) {
@@ -9861,16 +9903,16 @@ function mapWithOffset(array, startingOffset, mapFn) {
 const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, isDateDisabled, }) => {
     const today = new Date();
     const days = getViewOfMonth(focusedDate, firstDayOfWeek);
-    return (hAsync("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
-        hAsync("thead", null,
-            hAsync("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (hAsync("th", { class: "duet-date__table-header", scope: "col" },
-                hAsync("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
-                hAsync("span", { class: "duet-date__vhidden" }, dayName)))))),
-        hAsync("tbody", null, chunk(days, 7).map((week) => (hAsync("tr", { class: "duet-date__row" }, week.map((day) => (hAsync("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
-            hAsync(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
+    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
+        h("thead", null,
+            h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "duet-date__table-header", scope: "col" },
+                h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
+                h("span", { class: "duet-date__vhidden" }, dayName)))))),
+        h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "duet-date__row" }, week.map((day) => (h("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
+            h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
 };
 
-const datePickerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
+const datePickerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
 var NanoDatePickerStyle0 = datePickerCss;
 
 function range(from, to) {
@@ -10141,11 +10183,11 @@ class DatePicker {
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (hAsync(Host, { key: 'ce15b442e826c9b4857e6edb38f60ef3afe61a92', class: { ...createColorClasses(this.color) } }, hAsync("div", { key: 'fc05eab7b0885719f65c38d6f75575f69e76386c', class: "duet-date" }, hAsync("div", { key: '6caac24cff8adc3b2099f92b3cba63cfb08a279c', class: {
+        return (h(Host, { key: '126b01f14158329419fb42f1e54a02ce4cfb965c', class: { ...createColorClasses(this.color), 'nano-date-picker': true } }, h("div", { key: 'b1122b2aff25ff4f0f584fb8ba180d7b606e3826', class: "duet-date" }, h("div", { key: '6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync("div", { key: '16ac7a9237e872b16fcf6a119f7d9d33cceb6db4', class: "duet-date__dialog-content" }, hAsync("div", { key: '2dc8671bf3bfd1142afc07dee3a3c1938c5fb2ef', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), hAsync("div", { key: '0ab06f5c903d2d2a1b89591ae619e86e698af904', class: "duet-date__header", onFocusin: this.disableActiveFocus }, hAsync("div", { key: '23f53dc59c17789d0536329dd89e01dd05e33a5c' }, hAsync("h2", { key: '59ff3f0f4a004c232f47741fc47d3ced11b1ed0e', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), hAsync("label", { key: '8bd9d43f70b162b0e0c18fb2c80aef74fd0538b3', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), hAsync("div", { key: '050f1b788e135a5d039b9ef8bb9f3c7c3fb26ef1', class: "duet-date__select" }, hAsync("select", { key: '4917c18110da5dfa9732c93b92bc21d52d31d8b9', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (hAsync("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), hAsync("div", { key: '0d4ae83734c601e1b7e7aab05dc338e2143d006e', class: "duet-date__select-label", "aria-hidden": "true" }, hAsync("span", { key: '8b63a0b43277f4ae8a47296c7900532a470038f2' }, this.localization.monthNamesShort[focusedMonth]), hAsync("nano-icon", { key: '03a87211ceeb5ed341f30d1ca4280e45c523f23e', name: "light/chevron-down" }))), hAsync("label", { key: '6e3558a5eca3ff22cd34386835026b60e84a5f62', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), hAsync("div", { key: '7b26df791b9b0d8569bb46dae82ae8dff565f007', class: "duet-date__select" }, hAsync("select", { key: '0fe15c9f98f95e3002fbd3e20a08c08493dfb8fc', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (hAsync("option", { key: year, selected: year === focusedYear }, year)))), hAsync("div", { key: '18c4d1461db645b541d713859b804cf572543b10', class: "duet-date__select-label", "aria-hidden": "true" }, hAsync("span", { key: 'a1ab8275aa3f042ae63b7e3deb156a4ca4164bf0' }, this.focusedDay.getFullYear()), hAsync("nano-icon", { key: 'cbf1cbd255287c03c1488b03a354846bf5d21f51', name: "light/chevron-down" })))), hAsync("div", { key: '6a5220e5cd0f8c38f613e4211463e2adafb81d57', class: "duet-date__nav" }, hAsync("button", { key: '59f20fa24939df05a746fab1e0f122656a8f22a3', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, hAsync("nano-icon", { key: '0dc03af75cc61f12d15c2b33cc176f1d7c9f7428', name: "light/chevron-left" }), hAsync("span", { key: '041f653c9c9c6ddda1bfbf9ca713f1fb978ab387', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), hAsync("button", { key: '0e5e15bf3648612c8df0d25c8d2eb8a66c2acba1', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, hAsync("nano-icon", { key: 'b7be1f142a318fbca29bbaa99f8926f5a4af789f', name: "light/chevron-right" }), hAsync("span", { key: 'f96c71e9a92ee19c90ac6c244220c0ae1e0769e3', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), hAsync("div", { key: '82c4e92386f93a765db8504d374529c06e321898' }, hAsync(DatePickerMonth, { key: '6cebbdb7ac3024bac0c01fd75098b23eb3ee1696', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd0187c54b6c9ef0de0939f3fc722ffe721b862d8', class: "duet-date__dialog-content" }, h("div", { key: 'ee76a378ad52d1ac71258efc15c8723153c6c58e', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a2a2a170ccf1a6ad341086fcd7443aa2626c8591', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b' }, h("h2", { key: '70c4c43daf51201a0e2a568005a79f328230d324', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '8250e3839dfb6c35f9787aff667b2d141de5fdcd', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'd4a05e88e2df283665c016554c4adce5d26b44ef', class: "duet-date__select" }, h("select", { key: '69363c3bd0f0ccb700acc5e07d58b21626c8c567', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'bda454d4475eec3fe5ae9acc5c8469ecb3d18c05', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd19ab3a704087c802120ccc3302936c731b7562e' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '43a416a07564d92b336f24949e996883bf58d5ee', name: "light/chevron-down" }))), h("label", { key: '70377923f51c50f90e60f67176ff78a33d374ee0', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7bf07568e4a9cf4d8be23d4fc3524387a084c2fd', class: "duet-date__select" }, h("select", { key: 'd93e973816afe3104eb3e758d528710dcb75eaf5', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a702ec49fb3fae14fc45675cfeadf53ebb640d23', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '245198b80ab131426457daa425f3bb29178bd5cd' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '61346903f0755ced93ae4298fbf69c5045411c3d', name: "light/chevron-down" })))), h("div", { key: '58fa6c63619b08701a33b8690c6581d5109aeb48', class: "duet-date__nav" }, h("button", { key: 'c1428835b394a76fc15e7f627b0f1cf223a860d8', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '59a1bfa486467fd186afe8484cb6d36f6361ca31', name: "light/chevron-left" }), h("span", { key: '79b059d58381e91fe5fb3eab5f6c0e4e1f76a481', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9e3bf89c8ba8660985810339f2a26972b8669c9c', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '93ebf9ceb09fd374f99a4b1081d3a604a366c951', name: "light/chevron-right" }), h("span", { key: 'f9bab89b3c09bc9e53ea4d455881a4e9db64b222', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: 'b0a97a8d3aca05ef9db1a69602779e34ccee7bbe' }, h(DatePickerMonth, { key: 'e2dd247425720b2032e9e7a0a951a936d87dd560', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]
@@ -10228,7 +10270,7 @@ const displayTransition = (el, options) => {
     });
 };
 
-const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
+const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
 var NanoDetailsStyle0 = detailsCss;
 
 /**
@@ -10407,15 +10449,15 @@ class Details {
         }
     }
     render() {
-        return (hAsync("details", { key: 'd029baacc6b25b275585fd110244292df8565113', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: 'ee6fb3abfaf15e07a18d399514e8447d63512ce4', class: "nano-details" }, h("details", { key: '9478907ce6d6e8363c66df27e45e05a22705d38c', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 open: this.open,
                 disabled: this.disabled,
-            } }, hAsync("summary", { key: 'b89dd13ee05417c6e6d10d74b0657908d0219032', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (hAsync("span", { part: "icon--start", class: "icon icon--start", style: {
+            } }, h("summary", { key: '717ed7a624692dfce885436025e45cd011d9af5a', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
                 transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, hAsync("slot", { name: "icon-start" }))) : (''), hAsync("div", { key: '4f61a025fb297cb9211c7b2c34658b6cd696a12d', part: "label", class: "label" }, this.label ? this.label : hAsync("slot", { name: "label" })), this.hasEndSlot ? (hAsync("span", { part: "icon--end", class: "icon icon--end", style: {
+            } }, h("slot", { name: "icon-start" }))) : (''), h("div", { key: '9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
                 transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, hAsync("slot", { name: "icon-end" }))) : ('')), hAsync("div", { key: 'c1febecba9cfe36955454d98e7b29449c7cf0324', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, hAsync("div", { key: '3fbfde1832791ad82d1992671f7abb7506e88d6c', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, hAsync("slot", { key: '1f21df1c212294735004d2e34abc19c554b617a1' })))));
+            } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { key: '89311fc1194ca178843b5b751c48740b26689eaa', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: 'b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '4735f3166e91d58152564a4f1b423e77900fd84f' }))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]
@@ -10717,14 +10759,14 @@ class Dialog {
         this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
     }
     render() {
-        return (hAsync(Host, { key: '327adc7c947fac99e0a00e079ec558251d80a266' }, hAsync("div", { key: '4e782b64be0681b785e589f5ae5b52a9e9bd2897', part: "base", class: {
+        return (h(Host, { key: 'ecd2ed516be353ff67709a8091bb4bf3efe6f250', class: "nano-dialog" }, h("div", { key: 'c461f3cb97b4bec6409eddf83934cba04d3f649d', part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
                 'dialog--has-footer': !this.noFooter,
                 'dialog--has-header': !this.noHeader,
                 'dialog--nodismiss': this.noDismiss,
                 'dialog--with-ribbon': this.showRibbon,
-            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, hAsync("div", { key: '4cfa8d6ff444bc20e42a0946bd5a516db2fa43d2', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), hAsync("div", { key: '8e9593b9dcaa64414a6d1d9427e10c41015a5dcf', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, hAsync("div", { key: '562360b58859223f106716867976375b4b6b957c', class: "dialog__body-wrap" }, !this.noHeader && (hAsync("nano-sticker", { key: 'd6087985bfded2e52ab6338735863db986ffe385' }, hAsync("header", { key: 'efa2a403e7fb7b1c2a57a9dd898238b4429f7c84', part: "header", class: "dialog__header" }, hAsync("span", { key: '6c9a2d665dfecb5ae3fc9093e6cb699201449fac', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, hAsync("slot", { key: 'c5f6c366e8484f30dca2939cc0fc2febd9bfb752', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (hAsync("nano-icon-button", { key: '8bd420a022b705e6d1edbf612aba9b29d8f32ce6', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), hAsync("div", { key: '4dd4fb74f41493039cf35d75fb1d972d8499265c', part: "body", class: "dialog__body" }, hAsync("slot", { key: 'b30cab20e47d601ea6263816efd9046300959ccd' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (hAsync("nano-sticker", { key: 'b20eea7258ea5fdb63e3dc6f35dc696bd497774c', position: "bottom" }, hAsync("footer", { key: '0bdbc42b440abf68fdb01630795bd869b804f71e', part: "footer", class: "dialog__footer" }, hAsync("slot", { key: '1c4cdb096b7010830a35a166edf6844b732d36bb', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (hAsync("button", { key: '83e320d838a48a6c4bd38f55d8d367ea1a9bbf40', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: 'e54d7cf6106039f4d6c19357576de9da241970ab', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: '3a51d64ddd77f662e2aaea65d5f7ddf0895fb334', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '43e5d67892f8afeeef5d6528407888175fcedd64' }, h("header", { key: '229b41c3da0bdf7af0d2ff7670059d5213e80f6a', part: "header", class: "dialog__header" }, h("span", { key: '2432a5424e4307610d9ea546f9fd95010ea15f4f', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'fa310058f83f77addd68ebffe137dfe98dd21d02', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: '628a2209cc13e3b2b97512debfa5c4495ab63ff3', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: '081b6c433700ebfdd17919f007a2a15dc48a9510', part: "body", class: "dialog__body" }, h("slot", { key: '704d5a44e1c47d7de9b67b5911bba385991e0c95' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { key: '908ca9562cd246cc520c396725b68026cd610a26', position: "bottom" }, h("footer", { key: '9c5c2a8e3c8851b729453a1ac1a35cfeac240302', part: "footer", class: "dialog__footer" }, h("slot", { key: 'e2b48e7a7ef217c06ee6600f8b2000e3a0906a38', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { key: 'f99cee27f04c252ace3fb9f4305013f10cce07fc', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -10786,7 +10828,7 @@ function waitForEvent(el, eventName) {
     });
 }
 
-const drawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(calc(var(--nano-scroll-lock-size) * -1))}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
+const drawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(calc(var(--nano-scroll-lock-size) * -1))}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
 var NanoDrawerStyle0 = drawerCss;
 
 /**
@@ -11052,7 +11094,7 @@ class Drawer {
         }
     }
     render() {
-        return (hAsync("div", { key: 'db40a45412e0888b086030ff8401100acd1401d6', ref: (ele) => (this.drawer = ele), part: "base", class: {
+        return (h(Host, { key: '3993edab973a4e83921ef48b3a856eab71314995', class: "nano-drawer" }, h("div", { key: '81b617363f43048bb8e692838304641ed431e716', ref: (ele) => (this.drawer = ele), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 [`drawer--${this.placement}`]: true,
@@ -11061,9 +11103,9 @@ class Drawer {
                 'drawer--has-footer': hasSlot(this.host, 'footer'),
                 'drawer--has-header': !this.noHeader,
                 'drawer--nodismiss': this.noDismiss,
-            } }, hAsync("div", { key: 'e4397f16c37768976c6397bf33d90a377ce71d13', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), hAsync("div", { key: '43f932f004d2dd345654340cac30a02e6c766942', ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, hAsync("div", { key: 'c98cd059190bc7fd97efd20456efaaced0a841b1', class: "drawer__main" }, !this.noHeader && (hAsync("nano-sticker", { key: 'e14090df14f93c24a29d7f39f28d43f64906233b' }, hAsync("div", { key: '139e666f2f4010720536406c39ed5aa9ddcf3039', part: "header", class: "drawer__header" }, hAsync("h2", { key: '287eb7a12b2fb15fb025776cb06c400625c8ebef', part: "title", class: "drawer__title", id: "title" }, hAsync("slot", { key: '9b94e2f6e2db3790a72f8140b96ed0d58962bb3b', name: "label" }, this.label.length > 0
+            } }, h("div", { key: '92742f6c66f84178beec198eafa587f1e8386764', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { key: '6e083a039111b507f9a86b485e6b22b5b47c3f69', ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, h("div", { key: '6b32c26cbc35acd4717fa7f9cc80d829e8866433', class: "drawer__main" }, !this.noHeader && (h("nano-sticker", { key: '9969d99e402c4ea254aa25c2cff35e12fb60a9bc' }, h("div", { key: '75e40fc490e870674d055ac10c1862e6be48f03e', part: "header", class: "drawer__header" }, h("h2", { key: 'cdb1ebcff62005cc38f56613d5e2c0bd1a47749f', part: "title", class: "drawer__title", id: "title" }, h("slot", { key: 'e5c7f9fe9f4c32f36b978a8bdab51b7954fe7afd', name: "label" }, this.label.length > 0
             ? this.label
-            : String.fromCharCode(65279))), hAsync("div", { key: '08d2c72a3ca0de60993f10d33c4b80fc7403a38b', part: "header-actions", class: "drawer__header-actions" }, hAsync("slot", { key: '139147108174ce790215e0d054891ea11b33b598', name: "header-actions" }), !this.noUserDismiss && (hAsync("nano-icon-button", { key: 'dfe7251a9123202701d63d88df25b33e8d3527e5', part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/xmark", label: "Close", onClick: () => this.requestClose('close-button') })))))), hAsync("div", { key: 'b18eaaff9d9ade8ad6326b092ceff45dedfece6e', part: "body", class: "drawer__body" }, hAsync("slot", { key: '444b9e8cfb60e0ea9a16e3fef50d1928aa7b716b' })), hAsync("nano-sticker", { key: '817e9faa988eb7a86a3b59ca25e5bf4d7708b207', position: "bottom" }, hAsync("footer", { key: '7ffc8ceb33058570e9988e4e328665931ac5a305', part: "footer", class: "drawer__footer" }, hAsync("slot", { key: '0cc206a8cf95ce756a0633e53c5d8478a51fad53', name: "footer", onSlotchange: this.handleSlotChange })))))));
+            : String.fromCharCode(65279))), h("div", { key: 'c78dcf660ad85ae8e2c9191ddf8609d8e8847a95', part: "header-actions", class: "drawer__header-actions" }, h("slot", { key: 'b7dc420567ab5f0e74b57141a0779603bc244318', name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { key: '7269bc1bfa339e44d07466bc8b540b36c566fe2e', part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/xmark", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { key: '7ac9f1fc50efa2e13f73d5b15655ed585909a94d', part: "body", class: "drawer__body" }, h("slot", { key: '9f797d1de7cdcf634e2ee51d5e0bc055bae138df' })), h("nano-sticker", { key: '8807c8a2fc16f784f62e11c23edd607b757ab2b4', position: "bottom" }, h("footer", { key: 'a96da38ea84661627d2d905207f0c23e49962611', part: "footer", class: "drawer__footer" }, h("slot", { key: 'da0386d4942cf4ab05c605735a080321b6f87204', name: "footer", onSlotchange: this.handleSlotChange }))))))));
     }
     static get watchers() { return {
         "hoist": ["handleHoistChange"],
@@ -13019,7 +13061,7 @@ class Popover {
     }
 }
 
-const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
+const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
 var NanoDropdownStyle0 = dropdownCss;
 
 let dropDownIds = 0;
@@ -13047,7 +13089,7 @@ class Dropdown {
     accessibleTrigger;
     didLoad = false;
     get menu() {
-        return this.host.querySelector('nano-menu');
+        return this.host.querySelector(transformTag('nano-menu'));
     }
     get host() { return getElement(this); }
     /** Determines if the dropdown should open automatically when the trigger is clicked */
@@ -13161,7 +13203,8 @@ class Dropdown {
     handlePanelSelect(event) {
         const target = event.target;
         // Hide the dropdown when a menu item is selected
-        if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')
+        if (this.closeOnSelect &&
+            target.tagName.toLowerCase() === transformTag('nano-menu'))
             this.hide();
     }
     // Methods
@@ -13363,12 +13406,12 @@ class Dropdown {
             this.popover.destroy();
     }
     render() {
-        return (hAsync("div", { key: '12df84c2c810b737883ecade606afc7f2a668499', part: "base", id: this.dropdownId, class: {
+        return (h(Host, { key: '85c1bf918fa0800659aaab7d64c6832134d9b003', class: "nano-dropdown" }, h("div", { key: '9cc1b9eba8d8fea321f85c71cdd5fef1d823d03e', part: "base", id: this.dropdownId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, hAsync("span", { key: '8c7d099792ed9675b1968872a4241cb4a53882bd', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, hAsync("slot", { key: '4f2dcd66413968a15197421e077179b1c1467273', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: 'f9d8416faf7122a8003f7617c8002df15ff6d9d6', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, hAsync("div", { key: '64e8f983b70e61cbab84f3f9ce812cda085ae2cd', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (hAsync("span", { key: 'f6ac2f293047e43bb92940b93ddb58bffae07823', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+            } }, h("span", { key: '06975a344a9d5760057a1531dd43e4dea9a6eed9', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '6a5adccd87e2fa3c763cb2bdadff0aa4323c3da3', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '1a887678dd9cc47a8192060478a5d7acdb06600e', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'c81fc552c814c87e2df44bf8022c38729069240b', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h("span", { key: '6d38bbf3d0d4411190dac237f2daa0815fafa420', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                 ? undefined
-                : 'polite' }, this.dialogTitle)), hAsync("slot", { key: 'e4a3e354465a78c6c8645c8552dff8e81b413e2a' })))));
+                : 'polite' }, this.dialogTitle)), h("slot", { key: '8ad35ae3a28c6a057d1cf408e9256605759916ba' }))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -13650,8 +13693,8 @@ class FieldValidator {
     /** Sync up validateOn with all fields */
     validateOnChange() {
         this.nanoFields.forEach((field) => {
-            if (field.tagName === 'NANO-CHECKBOX') {
-                const cbg = field.closest('nano-checkbox-group');
+            if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {
+                const cbg = field.closest(transformTag('nano-checkbox-group'));
                 if (cbg)
                     cbg.validateOn = this.validateOn;
             }
@@ -13888,7 +13931,7 @@ class FieldValidator {
             if (!fieldName.length ||
                 typeof this._store.state[fieldName] === 'undefined')
                 return;
-            if (field.tagName === 'NANO-CHECKBOX' ||
+            if (field.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                 ['radio', 'checkbox'].includes(field.type)) {
                 const cbs = this.allFields.filter((f) => this.getName(field) === this.getName(f));
                 if (cbs[0].type === 'radio' ||
@@ -13922,7 +13965,7 @@ class FieldValidator {
                 }
                 return;
             }
-            if (field.tagName === 'NANO-FILE-UPLOAD') {
+            if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {
                 const ff = field;
                 // this can only work if the field is empty rn... a one-time deal
                 if (!ff.files?.length)
@@ -13935,9 +13978,9 @@ class FieldValidator {
     }
     getValidityTarget(field) {
         let validityTarget = field;
-        if (field.tagName === 'NANO-CHECKBOX') {
+        if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {
             // if we have a checkbox-group, set the validation message there
-            const cbg = field.closest('nano-checkbox-group');
+            const cbg = field.closest(transformTag('nano-checkbox-group'));
             validityTarget = cbg || field;
         }
         return validityTarget;
@@ -13955,7 +13998,7 @@ class FieldValidator {
                 // so let's not overwrite it
                 return;
             }
-            if (field.tagName === 'NANO-CHECKBOX' ||
+            if (field.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                 ['radio', 'checkbox'].includes(field.type)) {
                 const cb = field;
                 if (cb.type === 'radio' ||
@@ -13966,7 +14009,7 @@ class FieldValidator {
                         this._store.state[fieldName] = cb.value;
                 }
                 else if (this.allFields.filter((f) => this.getName(f) === fieldName &&
-                    (f.tagName === 'NANO-CHECKBOX' ||
+                    (f.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                         f.type === 'checkbox')).length > 1) {
                     // multiple checkbox type control
                     const currentArr = Array.isArray(this._store.state[fieldName])
@@ -13992,7 +14035,7 @@ class FieldValidator {
                 }
                 return;
             }
-            if (field.tagName === 'NANO-FILE-UPLOAD') {
+            if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {
                 const ff = field;
                 if (!this.fileStateEqual(fieldName, ff))
                     this._store.state[fieldName] = ff.files;
@@ -14088,15 +14131,16 @@ class FieldValidator {
         // field update has come programmatically (not from ui),
         // so let's update the underlying ui field
         if (found &&
-            (found.tagName === 'NANO-CHECKBOX' ||
+            (found.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                 ['radio', 'checkbox'].includes(found.type))) {
             // it's a cb - always change.
             this.storeToFields([found]);
         }
         else if (found &&
-            ((found.tagName === 'NANO-FILE-UPLOAD' &&
+            ((found.tagName.toLowerCase() === transformTag('nano-file-upload') &&
                 !this.fileStateEqual(key, found)) ||
-                (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))) {
+                (found.tagName.toLowerCase() !== transformTag('nano-file-upload') &&
+                    found.value !== newVal))) {
             // not a cb. Only change if value is different
             this.storeToFields([found]);
         }
@@ -14199,7 +14243,7 @@ class FieldValidator {
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (hAsync(Host, { key: 'ccaa19e009870cacff9581f70c88883c55656549' }, this.userForm && hAsync("slot", { key: 'bee67c4db80dcc1575d201b98e0fddcb3717ba3c' }), !this.userForm && (hAsync("form", { key: '0ec8b6448b2c15142fe0a3c6278c32761bccbc09', ref: (f) => (this.activeForm = f) }, hAsync("slot", { key: '59076ca975855dbcc9d313be45329dac1323c177' })))));
+        return (h(Host, { key: '0ef73112ee49ff435479e13de36f9097b501eb37', class: "nano-field-validator" }, this.userForm && h("slot", { key: 'f95060fd93124376d66412b53c51f529680ed2c8' }), !this.userForm && (h("form", { key: '05494f5dfdba499b092d12f39a87ebbabd402ea4', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'bbf842a53b0945e07798dbce9bb928ee34045a63' })))));
     }
     static get watchers() { return {
         "userForm": ["userFormChange"],
@@ -14236,7 +14280,7 @@ class FieldValidator {
     }; }
 }
 
-const fileUploadCss = ".sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
+const fileUploadCss = ".sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
 var NanoFileUploadStyle0 = fileUploadCss;
 
 let fileInputIds = 0;
@@ -14604,23 +14648,23 @@ class FileUpload {
             ? this.fileInputId + '-more'
             : '';
         return [
-            hAsync("div", { class: 'file-upload__' + eleType + '-wrap' }, hAsync("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
+            h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
                     this.onDrop(e);
                     this.onDragStop(e);
-                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (hAsync("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (hAsync("slot", { name: "label" })))), eleType === 'drop' && (hAsync("div", { class: "file-upload__drop-area" }, hAsync("div", null, this.hasLabelSlot && hAsync("slot", { name: "label" })), hAsync("div", null, "Drag and drop or\u00A0", hAsync("span", null, "browse")))), eleType === 'btn' && (hAsync("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, hAsync("div", { class: `file-upload__btn-content` }, hAsync("nano-icon", { name: "regular/cloud-arrow-up" }), hAsync("span", null, this.fileList.length
+                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("div", { class: `file-upload__btn-content` }, h("nano-icon", { name: "regular/cloud-arrow-up" }), h("span", null, this.fileList.length
                 ? this.fileList[0].file.name
-                : this.placeholder), !!this.value && this.clearInput && !this.disabled && (hAsync("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, hAsync("nano-icon", { name: "light/xmark" })))))), hAsync("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
+                : this.placeholder), !!this.value && this.clearInput && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" })))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (this.canChangeFileList) {
                         this.publicInputEl = input;
                         return;
                     }
                     this.inputEl = input;
-                }, onChange: this.onFileChoose, onFocus: this.onFocus, onReset: this.onInputChange })), hAsync("input", { name: !this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
+                }, onChange: this.onFileChoose, onFocus: this.onFocus, onReset: this.onInputChange })), h("input", { name: !this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (!this.canChangeFileList)
                         return;
                     this.inputEl = input;
                 }, type: "file", id: this.fileInputId + '-hidden', tabIndex: -1, multiple: true, class: "file-upload__input", disabled: this.disabled, required: this.required, accept: this.accept, onInvalid: this.onInvalid, onChange: this.onInputChange })),
-            this.showInlineError || this.hasHelperSlot ? (hAsync("div", { class: "file-upload__more", id: moreId }, this.showInlineError && !!this.errorMessage.length ? (hAsync("div", { class: "file-upload__error" }, this.errorMessage)) : (''), hAsync("div", { class: "file-upload__help" }, hAsync("slot", { name: "helper" })))) : (''),
+            this.showInlineError || this.hasHelperSlot ? (h("div", { class: "file-upload__more", id: moreId }, this.showInlineError && !!this.errorMessage.length ? (h("div", { class: "file-upload__error" }, this.errorMessage)) : (''), h("div", { class: "file-upload__help" }, h("slot", { name: "helper" })))) : (''),
         ];
     };
     button = () => {
@@ -14630,18 +14674,18 @@ class FileUpload {
         const listId = this.fileInputId + '-list';
         return [
             this.FileUploadInput('drop', listId),
-            hAsync("output", { class: "file-upload__list-wrap", id: listId }, !!this.fileList && this.fileList.length > 0 && (hAsync("ul", { class: "file-upload__list list" }, this.fileList.map((file) => {
-                return (hAsync("li", { key: file.file.name, class: "file-upload__list-item file-upload__list-item--active list-item", onAnimationEnd: (_) => this.onFileRemoveAnim() }, hAsync("span", { class: "list-title" }, file.file.name), !file.valid && (hAsync("nano-tooltip", { content: file.validationMessage, placement: "left" }, hAsync("nano-icon-button", { class: "list-button list-error", iconName: "light/triangle-exclamation", label: "File error" }))), this.canChangeFileList && (hAsync("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })), this.canChangeFileList && (hAsync("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/xmark", label: "Remove file" }))));
+            h("output", { class: "file-upload__list-wrap", id: listId }, !!this.fileList && this.fileList.length > 0 && (h("ul", { class: "file-upload__list list" }, this.fileList.map((file) => {
+                return (h("li", { key: file.file.name, class: "file-upload__list-item file-upload__list-item--active list-item", onAnimationEnd: (_) => this.onFileRemoveAnim() }, h("span", { class: "list-title" }, file.file.name), !file.valid && (h("nano-tooltip", { content: file.validationMessage, placement: "left" }, h("nano-icon-button", { class: "list-button list-error", iconName: "light/triangle-exclamation", label: "File error" }))), this.canChangeFileList && (h("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })), this.canChangeFileList && (h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/xmark", label: "Remove file" }))));
             })))),
         ];
     };
     render() {
-        return (hAsync(Host, { key: 'aa83308ab831900a4faf061fde8e24e89759e21b' }, hAsync("div", { key: 'b59f09ed9a3aa39f43ff411cff573d7cd76630a0', class: {
+        return (h(Host, { key: '1af0c1ae1d5c87a627b50cf9ab35599892043df2', class: "nano-file-upload" }, h("div", { key: '52db999aa429cd6a5976976b25c4861e6b9aee1d', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,
                 'file-upload--invalid': this._invalid,
-            } }, this.maxFiles > 1 ? hAsync(this.dropArea, null) : hAsync(this.button, null))));
+            } }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
     }
     static get watchers() { return {
         "fileList": ["fileListChange", "shouldValidate"],
@@ -14777,7 +14821,7 @@ const searchInsight = {
 };
 var searchInsight$1 = searchInsight;
 
-const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{inline-size:18px;block-size:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-inline-size:100%;min-inline-size:100%;box-shadow:none;transition:0.2s ease box-shadow;display:flex;flex-wrap:wrap}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";inline-size:100%;block-size:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{flex:1 1 100%;inline-size:fit-content;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{margin-block:0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{block-size:40px;inline-size:173px;min-inline-size:173px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px;inline-size:130px;min-inline-size:130px}.main-bar .logo-link{margin-inline:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;font-size:1.065em;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-inline-size:1px;display:block;margin:0;padding:0}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;block-size:100vh;inline-size:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;inline-size:calc(100vw - 20px)}.gn-menu.menu-full-screen{inline-size:100vw !important}.gn-menu_wrap{max-inline-size:92vw;inline-size:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;block-size:14px;line-height:14px;inline-size:auto;min-inline-size:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-block-size:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;inline-size:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:400;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;border-block-end:1px solid var(--menu-hint-color);padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600}.gn-menu .nav-links_title--sites{border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-block-end:0}.gn-menu .nav-links .back-btn{border-block-start:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;inline-size:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600;cursor:pointer}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;inline-size:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{inline-size:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;block-size:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:var(--nano-layer-index-mask, 10);visibility:visible}.search-btn::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{block-size:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-inline-size:45em;margin-inline-start:auto;flex:1;}.search-bar .search-widget{margin:0;overflow:inherit;max-inline-size:none;max-block-size:none;min-inline-size:auto;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-search-focus);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-search-focus);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-search-focus)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-block-size:2.35em;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;inline-size:100%}.search-widget{padding-inline-end:var(--bar-item-spacing);margin-inline:var(--bar-item-spacing) auto;position:relative;flex:1 1 auto;max-inline-size:500px;min-inline-size:350px;max-block-size:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);inline-size:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;padding-block:calc(var(--bar-vertical-padding) / 2) 1px;padding-inline:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:rgb(167, 176, 179);font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;inline-size:100%;text-decoration:underline;border-block-start:1px solid rgb(232, 234, 234)}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;inline-size:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-block-size:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;inline-size:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host(:dir(rtl)) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host-context([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-block-size:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{block-size:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;block-size:30px;inline-size:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn nano-icon{margin-inline-start:5px;inline-size:16px;block-size:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-inline-size:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:400;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:19px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#4a4a4a;--bar-color-shade:#d8d8d8;--bar-color-tint:rgb(19 89 111);--bar-color-focus:#007fa9;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--bar-search-focus:#007FA9;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#007fa9;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;block-size:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
+const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn .nano-icon{inline-size:18px;block-size:18px}.global-nav ::slotted(.nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-inline-size:100%;min-inline-size:100%;box-shadow:none;transition:0.2s ease box-shadow;display:flex;flex-wrap:wrap}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";inline-size:100%;block-size:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{flex:1 1 100%;inline-size:fit-content;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(.nano-nav-item[slot=icon]){margin-inline-start:11px}.main-bar>* ::slotted(.nano-nav-item),.main-bar>* .nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{margin-block:0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{block-size:40px;inline-size:173px;min-inline-size:173px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px;inline-size:130px;min-inline-size:130px}.main-bar .logo-link{margin-inline:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(.nano-nav-item),.main-bar .nav-links .nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;font-size:1.065em;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(.nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-inline-size:1px;display:block;margin:0;padding:0}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;block-size:100vh;inline-size:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;inline-size:calc(100vw - 20px)}.gn-menu.menu-full-screen{inline-size:100vw !important}.gn-menu_wrap{max-inline-size:92vw;inline-size:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;block-size:14px;line-height:14px;inline-size:auto;min-inline-size:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-block-size:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(.nano-nav-item),.gn-menu .nav-links .nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;inline-size:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(.nano-nav-item),.gn-menu .nav-links .user-nav .nano-nav-item{font-weight:400;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;border-block-end:1px solid var(--menu-hint-color);padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600}.gn-menu .nav-links_title--sites{border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-block-end:0}.gn-menu .nav-links .back-btn{border-block-start:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;inline-size:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600;cursor:pointer}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn .nano-icon{margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(.nano-nav-item),.gn-menu .nav-links--sub .nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;inline-size:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(.nano-nav-item),.gn-menu .nav-links--sites .nano-nav-item{inline-size:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn .nano-icon{margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;block-size:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:var(--nano-layer-index-mask, 10);visibility:visible}.search-btn::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{block-size:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-inline-size:45em;margin-inline-start:auto;flex:1;}.search-bar .search-widget{margin:0;overflow:inherit;max-inline-size:none;max-block-size:none;min-inline-size:auto;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-search-focus);font-size:1.1875em}.search-bar .search-widget .nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-search-focus);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget .nano-select.search-input.has-focus{color:var(--bar-search-focus)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-block-size:2.35em;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;inline-size:100%}.search-widget{padding-inline-end:var(--bar-item-spacing);margin-inline:var(--bar-item-spacing) auto;position:relative;flex:1 1 auto;max-inline-size:500px;min-inline-size:350px;max-block-size:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);inline-size:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;padding-block:calc(var(--bar-vertical-padding) / 2) 1px;padding-inline:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:rgb(167, 176, 179);font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;inline-size:100%;text-decoration:underline;border-block-start:1px solid rgb(232, 234, 234)}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}.nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;inline-size:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) .nano-select.search-input{overflow:hidden;max-block-size:1em}.nano-select.search-input .down-arrow{font-size:0.65em}.nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;inline-size:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host(:dir(rtl)) .nano-input.search-input{--input-border-radius:5px 0 0 5px}:host-context([dir=rtl]) .nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) .nano-input.search-input{overflow:hidden;max-block-size:1em}.nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}.nano-input.search-input .search-icon--show{display:flex !important}.nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.nano-input.search-input .search-icon .nano-icon{block-size:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;block-size:30px;inline-size:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn .nano-icon{margin-inline-start:5px;inline-size:16px;block-size:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open .nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-inline-size:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:400;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:19px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#4a4a4a;--bar-color-shade:#d8d8d8;--bar-color-tint:rgb(19 89 111);--bar-color-focus:#007fa9;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--bar-search-focus:#007FA9;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#007fa9;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;block-size:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
 var NanoGlobalNavStyle0 = globalNavCss;
 
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
@@ -15201,7 +15245,7 @@ class GlobalNav {
         ev.stopPropagation();
         this.secondaryMenuOpen = ev.target;
         if (!this.menuSelectedItems) {
-            this.menuSelectedItems = this.el.querySelectorAll('nano-nav-item[selected]');
+            this.menuSelectedItems = this.el.querySelectorAll(`${transformTag('nano-nav-item')}[selected]`);
             this.menuSelectedItems.forEach((i) => i.classList.remove('selected'));
         }
         this.menuContentDiv.style.minHeight =
@@ -15216,7 +15260,7 @@ class GlobalNav {
             this.menuContentDiv.style.minHeight = '';
             this.menuSelectedItems = null;
             this.el
-                .querySelectorAll('nano-nav-item[selected]')
+                .querySelectorAll(`${transformTag('nano-nav-item')}[selected]`)
                 .forEach((i) => i.classList.add('selected'));
         }
     }
@@ -15285,7 +15329,7 @@ class GlobalNav {
     }
     subMenuClose = (ev) => {
         ev.preventDefault();
-        ev.target.closest('nano-nav-item').open = false;
+        ev.target.closest(transformTag('nano-nav-item')).open = false;
     };
     // User profile menu
     onUserBtnClick = (ev) => {
@@ -15653,26 +15697,26 @@ class GlobalNav {
         let menuItems, barItems;
         readTask(() => {
             menuItems = [
-                ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),
-                ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
+                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="site"]`)),
+                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="overflow"]`)),
             ];
             barItems = [];
             if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
-                menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
             else
-                barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
             if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login)
-                menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
             else
-                barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
             if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main)
-                menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
             else
-                barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
             if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about)
-                menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
             else
-                barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
         });
         writeTask(() => {
             menuItems.forEach((item) => {
@@ -15724,9 +15768,9 @@ class GlobalNav {
             if ((this.autocompleteResults && this.autocompleteResults.hits.length) ||
                 (scopeChangeSuggestions && !currentScopeHits)) {
                 let scopeSuggestions = 0;
-                content = (hAsync("div", null, !currentScopeHits && (hAsync("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', hAsync("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
+                content = (h("div", null, !currentScopeHits && (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', h("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
                     this.autocompleteResults.hits.map((hit, i) => {
-                        return (hAsync("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit), onClick: () => {
+                        return (h("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit), onClick: () => {
                                 searchInsight$1.sendClick({
                                     index: this.currentIndex.index,
                                     eventName: 'Global nav quick search - search result clicked',
@@ -15745,34 +15789,34 @@ class GlobalNav {
                             scopeSuggestions > 1)
                             return;
                         scopeSuggestions++;
-                        return (hAsync("button", { role: "option", ref: (button) => this.autocompleteEles.push(button), tabindex: "-1", id: 'autocomplete-scope-' + i, class: "search-autocomplete-hit", onClick: () => this.switchIndexSubmit(result.index), onMouseDown: () => this.switchIndexSubmit(result.index) }, "\"", this.searchValInternal, "\"", ' ', hAsync("div", { class: "search-autocomplete-hit-scope" }, "in ", result.indexName)));
+                        return (h("button", { role: "option", ref: (button) => this.autocompleteEles.push(button), tabindex: "-1", id: 'autocomplete-scope-' + i, class: "search-autocomplete-hit", onClick: () => this.switchIndexSubmit(result.index), onMouseDown: () => this.switchIndexSubmit(result.index) }, "\"", this.searchValInternal, "\"", ' ', h("div", { class: "search-autocomplete-hit-scope" }, "in ", result.indexName)));
                     }),
-                ], !!currentScopeHits && (hAsync("div", { class: "search-autocomplete-foot" }, hAsync("button", { role: "option", class: "search-autocomplete-submit", ref: (button) => this.autocompleteEles.push(button), id: 'autocomplete-foot', onClick: this.onSearchSubmit, onMouseDown: this.onSearchSubmit }, "View all results")))));
+                ], !!currentScopeHits && (h("div", { class: "search-autocomplete-foot" }, h("button", { role: "option", class: "search-autocomplete-submit", ref: (button) => this.autocompleteEles.push(button), id: 'autocomplete-foot', onClick: this.onSearchSubmit, onMouseDown: this.onSearchSubmit }, "View all results")))));
             }
             else if (!currentScopeHits) {
-                content = (hAsync("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found. Try another phrase."));
+                content = (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found. Try another phrase."));
             }
         }
-        return (hAsync("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete, onKeyDown: this.onAutocompleteInteract }, content));
+        return (h("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete, onKeyDown: this.onAutocompleteInteract }, content));
     }
     searchWidget() {
         return [
-            hAsync("form", { class: "search-inputs", onSubmit: this.onSearchSubmit, id: "global-nav-search" }, hAsync("nano-select", { class: "search-input", label: "Which area of content would you like to search?", hideLabel: true, showInlineError: false, value: this.currentSelectedIndex()?.index, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
-                return (hAsync("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index));
-            }), hAsync("nano-icon", { name: "light/chevron-down", class: "select-input__arrow", slot: "down-arrow" })), hAsync("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search Nanopore", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, onKeyDown: this.onAutocompleteInteract, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
+            h("form", { class: "search-inputs", onSubmit: this.onSearchSubmit, id: "global-nav-search" }, h("nano-select", { class: "search-input", label: "Which area of content would you like to search?", hideLabel: true, showInlineError: false, value: this.currentSelectedIndex()?.index, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
+                return (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index));
+            }), h("nano-icon", { name: "light/chevron-down", class: "select-input__arrow", slot: "down-arrow" })), h("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search Nanopore", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, onKeyDown: this.onAutocompleteInteract, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
                     ? this.autocompleteEles[this.currAIndex].id
-                    : false, "aria-controls": "autocomplete-results", onNanoFocus: this.showAutocompleteResults, value: this.searchValue, role: "textbox" }, hAsync("button", { class: {
+                    : false, "aria-controls": "autocomplete-results", onNanoFocus: this.showAutocompleteResults, value: this.searchValue, role: "textbox" }, h("button", { class: {
                     'search-icon': true,
                     'search-icon--search': true,
                     'search-icon--show': !!this.searchValue && !this.searchLoading,
                 }, slot: "end", onClick: (e) => {
                     this.searchValInternal = this.searchInput.value;
                     this.onSearchSubmit(e);
-                } }, hAsync("nano-icon", { name: "light/magnifying-glass", role: "img", ariaLabel: "Search now" })), hAsync("span", { class: {
+                } }, h("nano-icon", { name: "light/magnifying-glass", role: "img", ariaLabel: "Search now" })), h("span", { class: {
                     'search-icon': true,
                     'search-icon--loader': true,
                     'search-icon--show': this.searchLoading,
-                }, slot: "end" }, hAsync("nano-icon", { name: "light/spinner-third" }))), hAsync("input", { type: "submit" })),
+                }, slot: "end" }, h("nano-icon", { name: "light/spinner-third" }))), h("input", { type: "submit" })),
         ];
     }
     render() {
@@ -15780,50 +15824,51 @@ class GlobalNav {
         const isRtl = this.el.ownerDocument.dir === 'rtl';
         const searchWidget = this.searchWidget();
         searchWidget.push(this.autocompleteList());
-        return (hAsync(Host, { key: 'ceda3253092e3966623805611c3073cc556da42d', class: {
+        return (h(Host, { key: '24a35d2ad7bf721dd01ea704298d32450c987c53', class: {
                 [this.thresholdClasses().join(' ')]: true,
                 ready: this.ready,
                 'search-bar-shown': this.searchBarShown && this.scrollingUp,
                 'search-auto-complete-shown': this.showAutocomplete && this.scrollingUp,
                 'modal-open': this.modalIsOpen,
                 resizing: this.isResizing,
-            }, dir: isRtl ? 'rtl' : null }, hAsync("div", { key: 'db4bc7c163e0bb39d93651b8620cc7a6de748c1a', class: {
+                'nano-global-nav': true,
+            }, dir: isRtl ? 'rtl' : null }, h("div", { key: '6507f16e32b2c6d1e236efa05a8eb725226bebab', class: {
                 'global-nav': true,
                 'scrolling-down': !this.scrollingUp,
-            } }, hAsync("nav", { key: '025fd87a092c590f2a3fcc4ca2b0e304e8bbe80a', id: "global-nav-menu", class: {
+            } }, h("nav", { key: '860000d1e558d4f386c6e656e9cf80768d5dad1f', id: "global-nav-menu", class: {
                 'gn-menu': true,
                 open: this.modalOpen,
                 'has-promotion': this.hasPromotionSlot,
                 'menu-full-screen': this.menuFullScreen,
                 'secondary-open': !!this.secondaryMenuOpen,
-            }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, hAsync("div", { key: 'd15deab6eda0c2264e61cc05e05b149138129c3e', class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, hAsync("div", { key: '713fa58af1ca9ef2088b6f639ee4c076a09d0c66', class: "gn-menu_actions", part: "burger-actions-bar" }, hAsync("button", { key: 'dde9091dcb1c57ce91c177f964c392b896b5d2bf', class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (hAsync("nano-icon", { key: 'b103dedeb0de2e38f382a1eaff38a5dee8d3051b', name: "light/xmark", "aria-label": "close menu", role: "img" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (hAsync("nano-icon", { key: 'cbce10bcc6a2bcfef0e594614b4cfc706a43756c', name: "light/bars", "aria-label": "close menu", role: "img" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && hAsync("slot", { key: '04eeecfd6ccbce9a662616397859c539579447da', name: "icon" }),
+            }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { key: '3d5bd2e8fd1257a1d3ee1d0106b85e213260c6c0', class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { key: '355f89f2ba243c3858e18c9af208d2c102214f6d', class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { key: 'b078eb21d775f3fb72873f08d8170c5cbd15fc7e', class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: '59d9b7de1ec45513defaa00b318f56335239c4ba', name: "light/xmark", "aria-label": "close menu", role: "img" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: 'a51364497a6436124d41c67387d4e06459fecac3', name: "light/bars", "aria-label": "close menu", role: "img" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
+            !!this.iconSlotLen && h("slot", { key: '5a4de1bfc3142f1ab92c14f996e371105e8747ae', name: "icon" }),
             this.myAccData &&
                 (!this.activeMyAccountSections ||
                     this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (hAsync("a", { key: '64989511ed03f4f4b498849acfb76da9b20bcb49', href: this.msgUrl, class: "icon-btn" }, hAsync("nano-icon", { key: '41d6976c5c4c774587d92eb6629a9cd4453b46c7', name: "light/bell", role: "img", ariaLabel: "Check notifications" }), this.msgCount > 0 && (hAsync("span", { key: '011d5590e22188cf4ed9b196adfd1515415711a4', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (hAsync("a", { key: 'c98708a9dd67bb8b4a8c20012f2e03338dd86bf8', href: this.cartUrl, class: "icon-btn" }, hAsync("nano-icon", { key: '6726cf018efba3262aca8c262ec60d324e3682b0', name: "light/cart-shopping", role: "img", ariaLabel: "Go to cart" }), this.cartCount > 0 && (hAsync("span", { key: '66260d5a4c7796d10ff4968645dcd7bfb0818c61', class: "gn-menu_actions-counter" }, this.cartCount)))),
+                this.msgUrl && (h("a", { key: 'c160c224ab55265b8711dfe52847ec694aea45b8', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: 'd1d6d0665ffd3fbe6a1cbf2fb5232b8de837680c', name: "light/bell", role: "img", ariaLabel: "Check notifications" }), this.msgCount > 0 && (h("span", { key: 'd88070f6f7b57b4f3db2d4165f3640b9c2a02cfa', class: "gn-menu_actions-counter" }, this.msgCount)))),
+                this.cartUrl && (h("a", { key: 'b34df751132a325edb07fd7b8bc722f6ac1a5249', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: 'baaeb176499832c4c337ab70b667c6405c289d25', name: "light/cart-shopping", role: "img", ariaLabel: "Go to cart" }), this.cartCount > 0 && (h("span", { key: '868f6bec4cec2385ead80ea3b25ff665546576d0', class: "gn-menu_actions-counter" }, this.cartCount)))),
             ],
-        ], this.myAccData && this.myAccData.urls.login && (hAsync("a", { key: 'b8bd00843832d9b33c2c056cf6a9092fde587b41', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', hAsync("nano-icon", { key: '81e42aea5289a6e8e8ebefc8008ac29ae4d9844b', name: "solid/chevron-right" })))), hAsync("div", { key: 'fe2209459687ab012e0c5533d397bb6b316f2f44', class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, hAsync("div", { key: '206b8871b399707d204b265d46f7d734caa7bbac', class: "content", part: "burger-content" }, hAsync("nav", { key: 'e130d3997439580b3829c776a08d3b4793326b20', class: "nav-links nav-links--main", role: "menu" }, hAsync("slot", { key: 'e34b8233578d0f0f8ffed436f6cf1ddf956d749c', name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-            !!this.mainSlotLen && (hAsync("slot", { key: '282f3fc30bfa4729836933b463194a826d2682dd', name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
+        ], this.myAccData && this.myAccData.urls.login && (h("a", { key: '574ed325458daae66c2ef942af1698d60a1fc7d1', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { key: '5cb49b6829078fa1703930c9d023638751604517', name: "solid/chevron-right" })))), h("div", { key: '998c9784eb21866fd28c2b261cfd61a1c2183de9', class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { key: '256be0960f44b72b62176a73a09937897aa211fb', class: "content", part: "burger-content" }, h("nav", { key: 'ed7346608de637f45639a5f7ee0a34930ebd2265', class: "nav-links nav-links--main", role: "menu" }, h("slot", { key: 'dfd170cd101390574856a9eadac9a67714d1f98f', name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
+            !!this.mainSlotLen && (h("slot", { key: 'f2e316b2d713411d126e39ac7c0a27f1d45128ad', name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
             this.hasSiteSlot) ||
-            !!this.siteNavItms.length) && (hAsync("div", { key: '868fd4c323c898b5ab84d0342c91142ab1a77e7c' }, (this.hasSiteSlot || !!this.siteNavItms.length) && [
+            !!this.siteNavItms.length) && (h("div", { key: '5cf164c338a24c26208a7807bb58e747890d0a3c' }, (this.hasSiteSlot || !!this.siteNavItms.length) && [
             (this.threshold >= THRESHOLDLIMIT - 2 ||
                 this.mainSlotLen < 2) &&
-                this.overflowSlotLen < 2 && (hAsync("div", { key: 'f1ecc66b77b82b8781133fbf63c3cba54f56946f', class: "nav-links-wrap" }, hAsync("h4", { key: '3f500c77e46dc92edf12a766471256bdc6cb0732', class: "nav-links_title nav-links_title--sites" }, "Sites"), hAsync("nav", { key: '474a2a1eb5804607061c154910d1ef85a27293e6', class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, hAsync("slot", { key: 'd9cb04967fbfe1c505b2c89d4ac14911b430a76a', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
+                this.overflowSlotLen < 2 && (h("div", { key: '5ae0b83ce30a602168a22d1367f75c7150eb2a8c', class: "nav-links-wrap" }, h("h4", { key: 'c19be958e609ed84e9e2feb0342c601fa5c38017', class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { key: '64fcab191bc5c7f100ba29fa83bff5e69813fc72', class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { key: 'aa8d2a33df760e02d193e94fc93fd731db345551', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
+                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
             })))),
             ((this.threshold < THRESHOLDLIMIT - 2 &&
                 this.mainSlotLen >= 2) ||
-                this.overflowSlotLen >= 2) && (hAsync("nav", { key: 'd96b03af604a79609a9753541d3b91f5279f6138', class: "nav-links", "aria-label": "Different company site links" }, hAsync("nano-nav-item", { key: 'e0d38fcdbaf13efc8794cbe6dc239f4e7ebb8fd7', class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", hAsync("nano-icon", { key: '222491df8fbae17b04b2ab12ac60b84d7a4e94fd', slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { key: '4fd0951bd245827975d74e8bd129bc52c0c5e16e', slot: "secondary" }, hAsync("div", { key: '48bb03c9ded8605be664120049d655a687a8746a', class: "content" }, hAsync("button", { key: 'c2c0d6243fe1143e69be061e1b8922121445d78f', class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { key: 'a63218c0176d0c4e648d9d9642f9ab37f54484e2', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), "Sites"), hAsync("div", { key: '8bd724d8ed6f066e77ee6a24a1c2e3c4373d20ff', class: "content--sub" }, hAsync("slot", { key: '5778a22c7b65b2fcd08f3d7ec80524bb67f6058b', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
+                this.overflowSlotLen >= 2) && (h("nav", { key: '6f7613703f867a4a120a9511bb591784479bbb1a', class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { key: 'b1f63cabe7bafb88d8d1a0386b1ea159ae334608', class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", h("nano-icon", { key: '5fe1c4389dacf278b3cc3290041af82e9f5f0731', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: '6fe3dbea59f144d3f857a70942ed03e667833f08', slot: "secondary" }, h("div", { key: 'd2c9bd8e6b35aebd5a2dc22a6a40de3db401123c', class: "content" }, h("button", { key: 'd996342c3f68a52c2d756801849ce2e82b25fb01', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '453b6631e44817cc9952cb649e3eb1e9f5b22a83', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), "Sites"), h("div", { key: '6aef4eb001acae9a17de56a9357293d7824da662', class: "content--sub" }, h("slot", { key: '64cf6e8c2bc47c9609c571a3e4fbf1a6d9955e0a', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
+                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
             }))))))),
         ]))), this.isLoggedIn &&
             this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-            (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { key: '850736ba273e3c6af95063d07e89560b58136226', class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { key: '55c65cae494ee1d610d24f422778479916abbea0', class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, hAsync("nano-icon", { key: 'b864c66b8fac307895a9237e3413093891c3911b', slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { key: 'c359ded4242707e2bd6d881d77facc1a0fdffd16', slot: "secondary" }, hAsync("div", { key: '7e732f132d058e6eb5d00aedc933e42de37daf30', class: "content" }, hAsync("button", { key: '279060c3c78adbd90e381c97915e72c2ff23df4d', class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { key: '78e4431b4bfff8ba600dce229ee543f83bb9ef32', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (hAsync("nano-global-nav-user-profile", { key: '0bc585026f62503e2286a8b575cd39e1ccd2612c', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { key: 'c2644c333bc812695d42dc4c21d8af6ed4fca89e', class: "content--sub" }, hAsync("slot", { key: '7ad5c3719510b379cf586fb016255745d58ee4c6', name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
-            return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
-        }), hAsync("nano-nav-item", { key: '30ff5321e7b0f0b9aca65c1e9b4210db6a4467a2', class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { key: 'c15591903c91575134e36f70e4f5c32a012de941', href: this.myAccData.urls.forgot_password +
-                this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { key: '4f479a3bad959fc343a02807a145c700b42e7483', name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { key: '9faeef2b33a7b958a91c979c5136b9b4e5ff14bc', class: "login-btn logout-btn" }, hAsync("a", { key: 'c7f55132375c303bf22c961b771046e5a195de17', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { key: '8d3f06caa5f6d31b38386e94e3c15442aec7e3db', class: "bars", part: "bars" }, hAsync("nav", { key: '568740754ad066ded30c30242ada0b953eadbd71', part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
+            (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { key: 'c74acf7d9230f3ce4722e9aee3cd7de5ab14fea2', class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { key: '2de6d7fbe9c41bcfbf213d86396c2f89c49ef00c', class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { key: 'ba118d2302b391640f00b30d8f03d64df08d0fb6', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: 'e7052720dd70aed785d055ee496d7c75f1736bf1', slot: "secondary" }, h("div", { key: '4dcc50535727163c54b95f705b390f16b4f82e7f', class: "content" }, h("button", { key: 'e3018cecdeca60b2fcf120a77bb3bd5bc710f19f', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '60938fd4dcf94006ffb5544fb7ddb24952ece667', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: 'd3d4d5d4e971f2c2e82adc7f64b3313d11e8a8e3', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '2dffba3926caf4e82f13baa8e1070fb15fa1194d', class: "content--sub" }, h("slot", { key: 'b424a41514d0a0ec6c218f6a6191c5441bb02740', name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
+            return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
+        }), h("nano-nav-item", { key: '2eaab58c5e0108e209308d1dd82e5a77803b8d02', class: "nano-global-nav nano-global-nav-menu" }, h("a", { key: '34b8908d1c901652129a9b7b3647945795e5d831', href: this.myAccData.urls.forgot_password +
+                this.ssoRedirect }, "Change Password")))))))), h("slot", { key: '8fc5918b9e332211e87b875d9688502be7e8c0f6', name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { key: '36f4753c6c5e7cdc1e52ebe48b618562bc6bd73f', class: "login-btn logout-btn" }, h("a", { key: 'b207ee40e85bcca7e6a6e5b9bbd22a4e0a4a4e06', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { key: '840fab91269d501ff63032755453fc7dd2e3044b', class: "bars", part: "bars" }, h("nav", { key: 'c5787f83cad65be5ab76d1c94e0afef8767ba30b', part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
             !!this.overflowSlotLen ||
             ((this.myAccData || !!this.iconSlotLen) &&
                 this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
@@ -15835,52 +15880,52 @@ class GlobalNav {
             ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
                 this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
             this.hasSiteSlot ||
-            !!this.siteNavItms.length) && (hAsync("button", { key: '1df66501d377d32756602b37efc256215ca6827f', class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, hAsync("nano-icon", { key: '08003a9cbe7739141ca950b57cbca80d59c26ff4', name: "light/bars", "aria-label": "Open menu" }))), this.showLogo && (hAsync("a", { key: '45d4a9f41894d85153643b102b3dda79e66a136f', href: this.logoUrl, class: "logo-link", part: "logo-link" }, hAsync("img", { key: 'bb6982196dcbd03f3e86d65d07fdfe0f891a0b4b', src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (hAsync("div", { key: '594ec310c35470f62a70760f2a2af3571e400d25', class: "logo-link" }, hAsync("slot", { key: '0feb2d7a0ab5ee5412a411b0f20a78fa891b690a', name: "logo", onSlotchange: this.assessSlottedContent }))), hAsync("div", { key: 'a55973abf2fad9f00d89c28d14031767e611b0dd', class: "nav-links nav-links--main" }, hAsync("slot", { key: '10edb90ec94c8bfad847eb9a1d3cc44d3113dc78', name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
+            !!this.siteNavItms.length) && (h("button", { key: '228ac94558fa514552ef4fdbf64d7e50f8308eaf', class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, h("nano-icon", { key: '0a6a501e1b137d8c2c6b35e89d5f2c2a227757ae', name: "light/bars", "aria-label": "Open menu" }))), this.showLogo && (h("a", { key: '287d80e53176feb00c5c27c7725709fb1bfe429b', href: this.logoUrl, class: "logo-link", part: "logo-link" }, h("img", { key: 'c4ed59df56ee140f81836c2e70c680cfc64494a9', src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { key: '6457da01602749c6d4e57cc5eed213eb709f4725', class: "logo-link" }, h("slot", { key: '55427cf66636a0dd4e230a3d0b102ef7f13d1b8c', name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { key: 'e80af31b5921eb88bc30c1c1cd744135e9bdf608', class: "nav-links nav-links--main" }, h("slot", { key: '5593574b8f2c1cbb42a7054b9d57a0e388671f47', name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
             this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
-            this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", { key: '959836475d21c7f5fdbffaa6a151d38844ce805a', class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
+            this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'b549fa2052b890c98612f61b36192b1ebdae3727', class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
                     ? 'true'
                     : 'false' }, searchWidget)),
             (!this.showSearch || !this.myAccData) &&
-                !!this.searchSlotLen && (hAsync("slot", { key: '7191d7a587bc0a9ecd2e495c6df8be4925b88cfc', name: "search", onSlotchange: this.assessSlottedContent })),
+                !!this.searchSlotLen && (h("slot", { key: '2ce8de3529a1282b84bdd869d8ee52e82d3b005e', name: "search", onSlotchange: this.assessSlottedContent })),
         ], (this.mainSlotLen > 0 ||
             this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
             ((this.showSearch && !!this.internalSearchIndeces.length) ||
-                !!this.searchSlotLen) && (hAsync("button", { key: '368884b9c3384bdb584deed9486ca2f96fad0689', class: {
+                !!this.searchSlotLen) && (h("button", { key: 'a7897e2689f5a359abf9ef9ed2a4ec817fd5b080', class: {
                 'icon-btn': true,
                 'search-btn': true,
                 'search-btn--open': this.searchBarShown,
-            }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick }, hAsync("nano-icon", { key: 'aeff003b72c950eb48ba564f4cc0dcb402d44364', name: "light/magnifying-glass", role: "img", ariaLabel: "Search Oxford Nanopore" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && hAsync("slot", { key: '9ee9b58f47c37e04992db2ea6dbb760b2199d964', name: "icon" }),
+            }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick }, h("nano-icon", { key: '722a12b69853025aea0afe9df06a619d4436cedc', name: "light/magnifying-glass", role: "img", ariaLabel: "Search Oxford Nanopore" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
+            !!this.iconSlotLen && h("slot", { key: '42e97c3c8747b7c74db55cecd0b69d1852578b76', name: "icon" }),
             this.myAccData &&
                 (!this.activeMyAccountSections ||
                     this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (hAsync("a", { key: 'ab65bbc5e39537eefd3e4fcbccd395a3ed806f42', href: this.msgUrl, class: "icon-btn" }, hAsync("nano-icon", { key: 'c33a164a2c69602d8850ba023d41dfb847fe777a', name: "light/bell", ariaLabel: "View your notifications" }), this.msgCount > 0 && (hAsync("span", { key: '86d7fd2568e3685b3986e1e4b1c579458c5fa69b', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (hAsync("a", { key: '0a899aaa7afe5926cd88e39d7337b72813891c4f', href: this.cartUrl, class: "icon-btn" }, hAsync("nano-icon", { key: 'ce434fb90cc320345cef5d171b1ddbaf82ac5158', name: "light/cart-shopping", ariaLabel: "View your shopping cart" }), this.cartCount > 0 && (hAsync("span", { key: 'f246a901d24d4615fec66ba014e0657d7cb0964b', class: "gn-menu_actions-counter" }, this.cartCount)))),
+                this.msgUrl && (h("a", { key: '594e5afec810a113431fec5d3e7455b436ed8e64', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: '06716749b05dd80fe53682007f4a7002cea52a4f', name: "light/bell", ariaLabel: "View your notifications" }), this.msgCount > 0 && (h("span", { key: '5663dbe78c0752ed36b0aedc6607616716bf7e80', class: "gn-menu_actions-counter" }, this.msgCount)))),
+                this.cartUrl && (h("a", { key: '37c337b1f1ee4cf77e7262d836ec5e68bfb8eeab', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: '453c5ab4b42e75939fba0d27bfc6612190110e3d', name: "light/cart-shopping", ariaLabel: "View your shopping cart" }), this.cartCount > 0 && (h("span", { key: 'f05cd64edfb4551025985f856015db1c0172aa08', class: "gn-menu_actions-counter" }, this.cartCount)))),
             ],
         ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (hAsync("nav", { key: '3ce034f72d8ab5df32ee10f5b9669da168d6aa21', class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, hAsync("slot", { key: 'a4cb4eac6b50b90b6c7fd68034413097eccf463a', name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (hAsync("nano-nav-item", { key: 'b6f8c35ba5ce43ab93f88e1bc694cc39cd1f49e6', class: "nano-global-nav nano-global-nav-bar" }, hAsync("a", { key: 'c1d70829b703dff3f7b922c170fe09983928ecbd', href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { key: 'd4acf4145017c329be89cc5dc8ee2c363e07abd9', class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { key: 'effca72df5b665591a8a0bfb20928c087f477926', name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { key: '53e97b86a3b21bb721f2c1c9429b644e80edb45f', class: "nano-global-nav nano-global-nav-bar" }, h("a", { key: '47b828025006378bc2d32e43e0b86c515a2ff4ae', href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
             (!this.activeMyAccountSections ||
                 this.activeMyAccountSections.includes('loggedin')) &&
             this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
-            this.myAccData.urls.login && (hAsync("a", { key: '4e7c88dfdb7a413df7f2cf308cbc082d1d5dc01e', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
-            this.myAccountUser && (hAsync("div", { key: '3f7f987452d9f8de25a4b83a46d3e20fa324595f', class: "user-links" }, hAsync("button", { key: '0b0c45ebb04db8bb0fd39c223c63990ee08905ae', class: {
+            this.myAccData.urls.login && (h("a", { key: '49e47b4a0eff405906177fa9ac75b7b8c503500e', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
+            this.myAccountUser && (h("div", { key: '92ff2c5e6cea3e5ed0383585ffa6048c0c260898', class: "user-links" }, h("button", { key: '9616128132c5cca0e0d7095255a2a268736021d4', class: {
                     'icon-btn': true,
                     'user-links-btn': true,
                     open: this.userMenuOpen,
-                }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, hAsync("nano-icon", { key: '2d5575012897f7e2c8f6d0f9cb12fcb5bb8380fd', name: "solid/caret-down", ariaLabel: "View your account links" })), hAsync("div", { key: '7028132765e72d5fe83219747ad4221e40b84683', class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!this.myAccountUser?.small_avatar_url && (hAsync("nano-global-nav-user-profile", { key: 'a3467be6d0f04caa79eba7509b4a5f1afb9e0038', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { key: '5d8c9dcf813436997d0143bb1da4646c583c42fe', class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
-                return (hAsync("a", { href: link.address, target: link.target }, link.title));
-            })), hAsync("div", { key: 'd8ae4d930ff1ce6388a25d9350b327521014233b', class: "user-links-panel-foot" }, hAsync("a", { key: '216c409f4a5e316a858ec9fe68138f33bf15d5d5', href: this.myAccData.urls.forgot_password +
-                    this.ssoRedirect }, "Change Password"), hAsync("a", { key: 'e7e033ff08b81bf325ac25d84e9e2c3e05cbdec4', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
+                }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, h("nano-icon", { key: '122db375cc8db65f5a4f16180f6428102d8cbd21', name: "solid/caret-down", ariaLabel: "View your account links" })), h("div", { key: 'f6e44355fee2fb4b13d0b2e2a0be9c70a5e8c2ae', class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: '4b394ae61cf88ee87bffc60f6a4941cd2a49a75d', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '11e22a97ca4f9fb61004e5d6b4a6a8b254fc42e0', class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
+                return (h("a", { href: link.address, target: link.target }, link.title));
+            })), h("div", { key: '960c025ec4f02407d7c3c7628391693146cb3696', class: "user-links-panel-foot" }, h("a", { key: 'b436b24213dcb3f3f5e6631bdb5c09a6cc8a58a1', href: this.myAccData.urls.forgot_password +
+                    this.ssoRedirect }, "Change Password"), h("a", { key: '9c068fc5c88b89b8b440de798481b50c75575c30', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
         ]), (this.mainSlotLen > 0 ||
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (hAsync("div", { key: '4c0818b9fa886b40a76068484c3be603c2e8c479', id: "global-nav-search-bar", class: {
+            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { key: 'c0301d8f09af80559b6b617338ab0280e9fa24af', id: "global-nav-search-bar", class: {
                 'search-bar': true,
                 show: this.searchBarShown,
-            }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, hAsync("div", { key: 'e247d9383ee5d6971784294a0cb6aa3fe0dfd8dc', class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", { key: '588f27daa253c676c114449f7d422a2d37513768' }, searchWidget)), (!this.showSearch || !this.myAccData) &&
-            !!this.searchSlotLen && (hAsync("slot", { key: '364532f3a05af6d1de520b3c06b7ad10c01f375b', name: "search", onSlotchange: this.assessSlottedContent })))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
-            this.menuFullScreen) && (hAsync("div", { key: 'f06fde8b9b0f2d20daaff68462fd174cad0833d1', class: {
+            }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { key: 'a91f8a78d5ef401db74dbcba2ed8baa707e239f5', class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'aabb58b78e40aba19642c8732422eb2e7575365f' }, searchWidget)), (!this.showSearch || !this.myAccData) &&
+            !!this.searchSlotLen && (h("slot", { key: '6814610e28a8710768cbed27b6e534024d06c4e5', name: "search", onSlotchange: this.assessSlottedContent })))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
+            this.menuFullScreen) && (h("div", { key: 'b49ca662c96557b2a267589c2f8d25f25f2bcb75', class: {
                 mask: true,
                 open: this.modalOpen,
-            }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), hAsync("div", { key: 'e0cd775ba3d7f553e52dcdca3010edfb5be985e4', class: "site-content" }, hAsync("slot", { key: '1ed7c7e2462f579d3acf0de982dfbb970355dfa7' }))));
+            }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { key: '2d3d588a904ee2c95c3582b9735bb8597dcf05d1', class: "site-content" }, h("slot", { key: '3411ccdeff0c33e857e72683e57acfcfef11ee96' }))));
     }
     // Data processing
     /**
@@ -16076,7 +16121,7 @@ class GlobalNavUserProfile {
     userProfileUrl;
     // Render output
     render() {
-        return (!!this.myAccountUser && (hAsync("a", { key: '31b3e0ae896e5a34f245dbfcb6e00ed6a471ff8b', href: this.userProfileUrl, class: "user-profile" }, hAsync("div", { key: '0941d9edce6e44514ad0d9de5106e42b5d68b23d', class: "left" }, hAsync("div", { key: '7b3e0ea8aeae2cccbad064e4ecf9b9e871e77507', class: "avatar-container" }, hAsync("img", { key: 'eb260f1daa4fa608b05e68fe19f0fbe72cd2062d', class: "avatar", src: this.myAccountUser?.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (hAsync("img", { key: 'bac044dfc3337f789696f2a537e5d68edc0e4576', class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), hAsync("div", { key: 'f105a381f0b4f180d8d0a8e4b70337dbd76e8263', class: "user-details" }, hAsync("span", { key: '4853278cb87b17d48617a65d03ca680a79237420', class: "name" }, this.myAccountUser.name), hAsync("span", { key: '0d898d60e1269a40838a01c15762deb00c45077b', class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), hAsync("div", { key: '4cd48813a80d5d65ad8d2f79edfc1b210b9ad972', class: "right" }, hAsync("div", { key: 'ce02fabe1a27ce856d6cce3020ac8dbfac18e354', class: "chevron-right" }, hAsync("nano-icon", { key: 'aaf766f5825248f222797821c4b3038757a74df0', slot: "icon-end", name: "light/chevron-right" }))))));
+        return (!!this.myAccountUser && (h("a", { key: 'af80219c25fba785b6f7d18afef4a41b9ced4765', href: this.userProfileUrl, class: "user-profile" }, h("div", { key: '6ae0f4f9b48782faadb43d1594159e3fad9ee63d', class: "left" }, h("div", { key: '0bd20abade1f0fe5822aba9c2217d80124d62b20', class: "avatar-container" }, h("img", { key: '1a7096bd20754f3faf5ab150da0ebe2fe2684188', class: "avatar", src: this.myAccountUser?.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { key: 'ad532ddde8267a7049820fb7ae39f0302f208db9', class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { key: '9521c0b57fcb9343a746b0d0243f111e0a014100', class: "user-details" }, h("span", { key: '710b0ab535abe256c1d778f0e7deda1f23465fb9', class: "name" }, this.myAccountUser.name), h("span", { key: 'c4e782a0a9e70b7e160bfd466430126d6d77cb28', class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { key: '3725605d921254382356a40da96c45a9cc54d401', class: "right" }, h("div", { key: 'fd99f869ee248ce594b5fef4fe310cfe9a127dd4', class: "chevron-right" }, h("nano-icon", { key: '4e548bc839e06498c1f1641af7fe30715e572d97', slot: "icon-end", name: "light/chevron-right" }))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -16091,7 +16136,7 @@ class GlobalNavUserProfile {
     }; }
 }
 
-const globalSearchResultsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:\"\";inline-size:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);inline-size:70%;block-size:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:rgb(247, 246, 246);transform:translateX(100%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;block-size:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters nano-details nano-icon[slot=icon-end]{padding-inline:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;block-size:1em;inline-size:1em;min-inline-size:1em;min-block-size:1em;display:inline-block}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,url-encode(\\\"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\\\")\");content:\"\";block-size:0.7em;inline-size:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-flow:row wrap;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{margin:1em 0 0.5em;inline-size:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{color:#455556;font-size:13px;inline-size:70%;text-decoration:none}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;inline-size:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:#90c6e7;display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;inline-size:70%}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}";
+const globalSearchResultsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;flex:1 1 100%}.main-search{display:flex;background:white;font-size:14px;min-block-size:calc(100vh - 63px);justify-content:space-between}.main-search__wrap{display:contents;block-size:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button:not(.result__tags-tag){appearance:none;border:none;background:none;position:relative;inset-block-start:-2px}.main-search .icon-button{color:inherit;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.main-search__topbar{display:flex;align-items:center;flex-wrap:wrap;margin-block-end:1em}.main-search__topbar::after{content:\"\";inline-size:calc(100% - 30px);inset-inline-start:30px;position:relative;border-block-end:1px solid #e5eef1;padding-block-start:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:flex;align-items:center;line-height:0.9;padding:5px 5px 0;letter-spacing:2px;flex-wrap:wrap;margin-block-end:0.5rem}.main-search__applied-filters span{display:flex;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-inline:0 5px;margin-block:0 3px;padding-inline:7px;padding-block:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}.main-search__applied-filter{padding-inline:8px 2px;padding-block:5px 3px;margin-inline:0 5px;margin-block:0 5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}.main-search__applied-filter .icon-button{padding-inline:10px 4px;padding-block:2px 1px}.main-search__applied-filter .icon-button .nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;inset-inline-start:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:flex;align-items:center;margin-block:0;margin-inline:1em 0;flex:1}.main-search .topbar__order{min-inline-size:175px;max-inline-size:200px;margin-inline-start:auto}:host(.small) .main-search .topbar__order{max-inline-size:300px}.main-search .topbar .nano-select{opacity:1;transition:0.1s ease opacity}.main-search .topbar .nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-inline-start:0.5em;text-transform:uppercase;display:none;flex-direction:column;align-items:center}.main-search .topbar__show-filters .nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:flex}.main-search .topbar__filter-count{inline-size:12px;block-size:12px;box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;margin-block-end:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);inline-size:70%;block-size:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{inline-size:100%}.main-search__filters{outline:none;padding-inline:0 40px;padding-block:1.8em 1em;flex:1 1 30%;box-sizing:border-box}@media (max-width: 576px){.main-search__filters{padding-inline-end:20px}}:host(:not(.small)) .main-search__filters{max-inline-size:350px;min-inline-size:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;inline-size:0;block-size:0;z-index:10;inset-block-start:0;inset-inline-end:0;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{block-size:100vh;inline-size:100vw;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:\"\";background:rgba(0, 0, 0, 0.5);position:absolute;inset:0;z-index:-1;opacity:0;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-inline:auto 0;margin-block:0}.filters__old-posts{margin-inline-start:1rem}:host(.small) .filters-wrap{position:absolute;inset-block-start:0;inset-inline-end:0;background:rgb(247, 246, 246);transform:translateX(100%);inline-size:300px;min-inline-size:200px;max-inline-size:80vw;transition:transform 0.3s ease;padding:1em;color:black;overflow:auto;block-size:100vh}:host(.small) .filters.show .filters-wrap{transform:translateX(0%);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters .nano-details{--padding:0.8em;margin:0.8em 0}.filters .nano-details strong[slot]{display:block;padding-inline-start:calc(20px - 0.8em)}.filters .nano-details .nano-icon[slot=icon-end]{padding-inline:calc(20px - 0.8em)}.filters li:last-child .filter-label{margin-block-end:0}.filters .filter-label{display:flex;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-inline:0 1em;margin-block:0;content:\"\";border:1px solid #007495;background:#fff;border-radius:3px;block-size:1em;inline-size:1em;min-inline-size:1em;min-block-size:1em;display:inline-block}.filters .filter-label::after{background-image:url(\"data:image/svg+xml;charset=utf-8,url-encode(\\\"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\\\")\");content:\"\";block-size:0.7em;inline-size:0.7em;position:absolute;inset-inline-start:2px;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:flex;align-items:center;border-block-end:1px solid #90c6e7;padding-block-end:0.5rem;margin-block-end:0.5rem}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-inline:auto 0;margin-block:0}:host(.small) .filters-reset{margin:0}.filters-title{margin:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:flex;flex-flow:row wrap;padding-block-end:14px;border-block-end:1px solid #90c6e7}.result *{word-wrap:break-word;overflow-wrap:break-word}.result__title{margin:1em 0 0.5em;inline-size:70%;display:flex}.result__title a{color:#0084a9;font-size:14px;line-height:1.43;text-decoration:none;font-weight:600}.result__title .nano-icon{margin-inline:0 0.5em;margin-block:0;min-inline-size:20px;min-block-size:20px;opacity:0.8}@media (max-width: 992px){.result__title{inline-size:100%}}.result__body{color:#455556;font-size:13px;inline-size:70%;text-decoration:none}@media (max-width: 992px){.result__body{inline-size:100%}}.result__pdf{display:inline-block;margin-inline-start:0.5rem;color:#b5aea7}.result__meta{display:flex;flex-flow:row wrap;color:#455556;font-size:11px;line-height:13px;inline-size:100%;align-items:center}.result__meta>*{margin-block-start:0.5rem}.result__meta>*:not(:last-child){padding-inline-end:0}.result__meta>*:not(:last-child)::after{content:\"\";block-size:1rem;inline-size:1px;background:#90c6e7;display:inline-block;margin-inline:0.7rem}@media (max-width: 576px){.result__meta>*:not(:last-child)::after{display:none}}@media (max-width: 576px){.result__meta{flex-flow:column;align-items:flex-start}}.result__tags{display:flex;flex-flow:row wrap}@media (max-width: 576px){.result__tags{padding-inline-start:0}}.result__tags-tag{color:#455556;display:inline-block;font-size:0.4375rem;letter-spacing:1.4px;background:#fff;border-radius:2px;text-transform:uppercase;padding:0 4px 1px 5px;font-weight:600;margin:3px 0.25rem 0.25rem 0;border:1px solid #b5aea7;white-space:nowrap;line-height:13px}.result__type{font-weight:600;text-transform:capitalize;white-space:nowrap;display:flex;align-items:center}.result__date{display:flex;align-items:center;color:#455556}.result__source{color:#455556;padding-inline-end:0.75rem}.result__authors{font-size:12px;color:#455556;margin-block-end:0.25rem;text-decoration:none;inline-size:70%}.result__buttons{inline-size:70%;margin-block-end:0.5rem}.result__buttons-button{background-color:#007495;color:#fff;padding:5px 8px 1px;border-radius:4px;display:inline-block;font-size:11px;text-decoration:none;border:none}.result__promo{inline-size:70%;margin-block-end:0.5rem;text-decoration:none;color:#455556}.result__promo-box{inline-size:300px;background-color:#e3eef1;padding:12px 12px 8px 4px;display:flex;flex-flow:row nowrap;margin-block-start:1rem}.result__promo-bigdate{flex:0 1 60px;text-align:center;font-weight:600;color:#007495;text-transform:uppercase;line-height:1;letter-spacing:1.5px}@media (max-width: 992px){.result__promo-bigdate{inline-size:100%}}.result__promo-bigdate span{color:#455556;display:block}.result__promo-bigdate~div{padding-inline-start:1rem;border-inline-start:1px solid #c5dbe1}.result__promo-date{font-size:12px}.result__promo-venue{font-size:12px}.result__promo .nano-icon{color:#007495;position:relative;inset-block-start:1px;padding-inline-end:2px}.result__image{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:4px;position:relative;inline-size:100%;block-size:150px;margin-block-end:0.5rem}@media (min-width: 576px){.result__image{inline-size:142px;block-size:80px}}.result__image .nano-icon{position:absolute;inset-block-start:calc(50% - 0.75rem);inset-inline-start:calc(50% - 0.75rem);font-size:1.5rem;color:#0084a9;--primary-color:#fff;--secondary-color:#0084a9;--primary-opacity:1}@media (max-width: 576px){.result__image .nano-icon{font-size:3rem;inset-block-start:calc(50% - 1.5rem);inset-inline-start:calc(50% - 1.5rem)}}.result__video-body{inline-size:70%;text-decoration:none;display:flex;flex-flow:row wrap}@media (max-width: 992px){.result__video-body{inline-size:100%}}@media (max-width: 576px){.result__video-body{flex-flow:column}}.result__video-body .result__body{padding-inline-start:1rem;display:flex;flex-direction:column;margin-block-end:0;flex:1}@media (max-width: 576px){.result__video-body .result__body{padding-inline-start:0}}.result__video-body .result__body p{display:inline;margin:0}.result__video-body .result__body u,.result__video-body .result__body li,.result__video-body .result__body a{text-decoration:none}.result__video-body .result__body .result__meta{margin-block-start:0.5rem}.result__video-body .result__body .result__description{flex:1 0 auto}.search-empty{padding:3rem 0;text-align:center;border-block-start:1px solid #e5eef1}.search-empty h2{color:#455556;font-size:1.125rem;margin-block-end:0.5rem}.search-empty-icon{font-size:7rem;--icon-color:#e4e6e8;margin-block-end:2rem}.search__highlight{background:#fbffbf;font-style:normal}";
 var NanoGlobalSearchResultsStyle0 = globalSearchResultsCss;
 
 const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
@@ -16141,7 +16186,7 @@ class GlobalSearchResults {
         }
     }
     handleGlobalNavReset(e) {
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         this.algoliaResultsEle = null;
         this.goback();
@@ -16150,7 +16195,7 @@ class GlobalSearchResults {
         const { detail: { meta, client }, } = e;
         this.apiKey = client.apiKey;
         this.appId = client.appId;
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         this.index = {
             name: meta.indexTitle,
@@ -16320,7 +16365,10 @@ class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (hAsync(Host, { key: 'b592c70a9e711647256cf69f24b7a7b3ebc9e11a', class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, hAsync("nano-algolia", { key: 'cdede8937fca673686c787905bca39b8b348bdc5', storeId: "searchq", storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, hAsync("template", { key: '21ce1d40b839c2945c7a2a8dce97017ac569842d', slot: "template" }, 
+        return (h(Host, { key: '9e9ee3d64c3887ab038de05adbcf01164904a267', class: {
+                small: this.currentWidth < 677,
+                'nano-global-search-results': true,
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '2716189744e26d36ab20ba3ce0d4e48852586955', storeId: "searchq", storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '048798b2c38c9af665c8555b366c545c57387fdc', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -16705,7 +16753,7 @@ class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), hAsync("div", { key: 'd295f3b569dcd1daa7a0a10148489519e2b8bce1', slot: "output" }), hAsync("slot", { key: '156692c55474bd2b3694396fb8de9f98da8b5aab' }))));
+            </div>`), h("div", { key: '836a3c9ba7855d4f08420f55c2df97c65438abad', slot: "output" }), h("slot", { key: 'a025d95f4ae2195f4aced3ade5acc3a433cbf3f5' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],
@@ -17037,7 +17085,7 @@ class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (hAsync(Host, { key: '2eebb69e86c8ba0a00a3e589986514723cc3292b' }, hAsync("div", { key: '9cd5af7437da2dc43540cfd7ef63fe3182efe67c', part: "grid", class: "grid", "cache-key": this.cacheKey }, hAsync("slot", { key: 'c078a0403599f3fed6c4f525188f2ea53eb1513d' })), this.showHelper && (hAsync("div", { key: 'a429c6a72df606909afcbbdda2fedc59d1767f4f', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '0299504cb77aa4332c7dc2c2d895513938844d10', clas: "nano-grid" }, h("div", { key: 'ea2a3faf3994483ae290955ba4ba6a6a8afa4a94', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '8b0233a9a7b6fece32ddc3ebe7753efcf3d494cd' })), this.showHelper && (h("div", { key: 'e2a9d7d2dad1ce5a1b41716a377631123e74ebcd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],
@@ -17106,7 +17154,7 @@ class GridItem {
      * m-row-start-2
      */
     render() {
-        return hAsync("slot", { key: '4515e532ac60ce23823d8918613c9783ae1751ea' });
+        return hAsync("slot", { key: '8455879c23d6022649f66a70f8812ce6129d0da1' });
     }
     static get style() { return ":host { display: inline-block; }"; }
     static get cmpMeta() { return {
@@ -17119,7 +17167,7 @@ class GridItem {
     }; }
 }
 
-const heroCss = ":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";
+const heroCss = ":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (width <= 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (width <= 58em) {\n  .hero__ctas {\n    margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  margin-inline-start: 0;\n}\n.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  margin-block-end: 0;\n}\n.hero__quote-content {\n  margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 600;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 200;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n    margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n    margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";
 var NanoHeroStyle0 = heroCss;
 
 /**
@@ -17217,16 +17265,16 @@ class Hero {
     }
     HeroContent = () => {
         return [
-            !this.hasIconBox && this.hasCtas ? (hAsync("div", { class: "hero__ctas" }, hAsync("slot", { name: "secondary-ctas" }))) : (''),
-            hAsync("div", { class: "hero__scrim" }, hAsync("slot", { name: "scrim" })),
-            hAsync("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, hAsync("div", { "grid-states": "xl-col-span-2" }, hAsync("div", { class: "hero__breadcrumbs" }, hAsync("slot", { name: "breadcrumb" }))), hAsync("div", { "grid-states": this.hasSecondaryContent
+            !this.hasIconBox && this.hasCtas ? (h("div", { class: "hero__ctas" }, h("slot", { name: "secondary-ctas" }))) : (''),
+            h("div", { class: "hero__scrim" }, h("slot", { name: "scrim" })),
+            h("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("div", { "grid-states": "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("div", { "grid-states": this.hasSecondaryContent
                     ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
-                    : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, hAsync("div", { class: "hero__primary" }, hAsync("div", { class: "hero__primary-content" }, hAsync("slot", { name: "back-btn" }), hAsync("div", null, hAsync("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (hAsync("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, hAsync("div", { class: "hero__secondary" }, hAsync("slot", { name: "secondary-content" }), this.hasIconBox && (hAsync("div", { class: "hero__icon-box" }, hAsync("slot", { name: "icon-box" }), hAsync("slot", { name: "icon-box-item" }))), this.hasQuote && (hAsync("div", { class: "hero__quote-content" }, hAsync("span", { class: "hero__quote" }, hAsync("slot", { name: "quote" })), hAsync("div", { class: "hero__quote-author" }, hAsync("slot", { name: "quote-author" })))))))),
+                    : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
         ];
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (hAsync(Host, { key: '50eee29214f21f5278267bcc742170347e7cf397' }, hAsync("div", { key: '8a2ab272547fd2a3627c039e9666a24b6de223c9', class: {
+        return (h(Host, { key: '3ea826a0e3c29d25595e2ed95b36398980193ade', class: "nano-hero" }, h("div", { key: '09b08515b8bd244eef354df64e76814ec7fbda6d', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -17237,9 +17285,9 @@ class Hero {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, hAsync("div", { key: '8c17aac8b8653355e4ce97fa119d86e0cce518ae', class: "hero__bg-wrap" }, !!this.imgSrc && (hAsync("nano-img", { key: '89df34f9d693a35df5f2092ef3232772caa860a1', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, hAsync(this.HeroContent, { key: 'dc4d9b0027cfc96f13ff7757e175da523b3eb100' }))), !this.imgSrc && [
-            hAsync("div", { key: '1e760a079ebcaab5272a10fdb7b70aa3622ce0db', class: "hero__bg-slot" }, hAsync("slot", { key: '3a73a260e528956adc797cdd39bb521c54db7b96', name: "background" })),
-            hAsync(this.HeroContent, { key: 'dd458de1ca33a34131445390b95bf63bb27dfeba' }),
+            } }, h("div", { key: '46b5daff7c9c768c5354b54a1dd9f8ca8b9fc100', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '0bc5e85862297cbd10bb4953c545eaccfde46d34', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: '96a6199bb1c851b70cbc146b25d722f3c7c7cfbb' }))), !this.imgSrc && [
+            h("div", { key: 'b34f8983859f55762fddd7ebadd95b2db6d96f7a', class: "hero__bg-slot" }, h("slot", { key: 'df7263acd2610a142fe492555b77e6d24bd382a4', name: "background" })),
+            h(this.HeroContent, { key: 'c02cbdf49f60dc755c3103f84df6e1de82b3a7ce' }),
         ]))));
     }
     static get watchers() { return {
@@ -17425,12 +17473,13 @@ class Icon {
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl() &&
                 this.flipRtl !== false);
-        return (hAsync(Host, { key: '2f552d1b452a5c6a2b3aba09d5eba30e22ba756c', class: {
+        return (h(Host, { key: 'b63eb962d8abc727b57cbb63b665296a2801f4a0', class: {
                 ...createColorClasses(this.color),
                 loading: this.isLoading,
                 [`icon-${this.size}`]: !!this.size,
                 'flip-rtl': !!flipRtl,
-            } }, (hAsync("div", { class: "icon-inner" }))));
+                'nano-icon': true,
+            } }, (h("div", { class: "icon-inner" }))));
     }
     static get watchers() { return {
         "ariaLabel": ["udpateRole"],
@@ -17563,9 +17612,9 @@ class IconButton {
     }
     render() {
         if (this.showTooltip) {
-            return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null }, hAsync("nano-tooltip", { content: this.label }, this.content())));
+            return (hAsync(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, hAsync("nano-tooltip", { content: this.label }, this.content())));
         }
-        return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null }, this.content()));
+        return (hAsync(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
     }
     static get style() { return NanoIconButtonStyle0; }
     static get cmpMeta() { return {
@@ -17732,16 +17781,16 @@ class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (hAsync("div", { key: 'cbb3d0ef49c058dbf5767ca7b78c3559068c2446', class: "img" }, hAsync("nano-skeleton", { key: 'f2e120c2563e4034795c3bab3151a90b2202487a', class: "img__loader" }), !!this.background && (hAsync("div", { key: '3f5fd5a46bc7b92f47b03aa718a1dc10fa582e03', class: {
+        return (h(Host, { key: '5f56dcb4a2fe386f1bdd130f4ddf48e2f6859f67', class: "nano-img" }, h("div", { key: 'bf901f23c00d91e988c530b98ea3e72d55a06b25', class: "img" }, h("nano-skeleton", { key: '67b01b95235b44ac958f74b9162a1f10f81d5253', class: "img__loader" }), !!this.background && (h("div", { key: 'b5f786a707e70b78a183fcd15fb02d0ed1066d9c', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, hAsync("slot", { key: 'f98f9ac3cf5203cba787611159026da6a068a4b0' }))), hAsync("img", { key: 'e8c77b33922845f24760a075110e81e7e55ab914', class: {
+            }, style: bgStyle }, h("slot", { key: 'a56ca90ca3a47eeefe1f54229c2d4cf056dab2fc' }))), h("img", { key: 'f15763c2522895d76416e38044cc26baff76f74a', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), hAsync("nano-resize-observe", { key: '5208f5833596d5ed04e5a4dd1f2e8418510ea144', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates })));
+            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '4db81fe9e3b7fb99773daa70efe9f89abb2ad362', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],
@@ -17776,70 +17825,70 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
     if (!label && !hasLabelSlot)
         return;
     if (floatLabel) {
-        return (hAsync("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
-            hAsync("slot", { name: "label" }, label),
-            showCharCount && (hAsync("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
+        return (h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
+            h("slot", { name: "label" }, label),
+            showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
     }
     else {
-        return (hAsync("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
-            hAsync("div", { class: "form-ctrl__label-wrap" },
-                placeholder && hasValue && rtl && (hAsync("span", { class: "form-ctrl__label-placeholder" },
+        return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
+            h("div", { class: "form-ctrl__label-wrap" },
+                placeholder && hasValue && rtl && (h("span", { class: "form-ctrl__label-placeholder" },
                     placeholder,
                     " / ")),
-                hAsync("span", { class: "form-ctrl__labeltext" },
-                    hAsync("slot", { name: "label" }, label)),
-                placeholder && hasValue && !rtl && (hAsync("span", { class: "form-ctrl__label-placeholder" },
+                h("span", { class: "form-ctrl__labeltext" },
+                    h("slot", { name: "label" }, label)),
+                placeholder && hasValue && !rtl && (h("span", { class: "form-ctrl__label-placeholder" },
                     " / ",
                     placeholder))),
-            showCharCount && (hAsync("span", { class: "form-ctrl__label-charcount" }, maxlength
+            showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength
                 ? maxlength - charCount + ' left'
                 : charCount + ' characters'))));
     }
 };
 const FormControlWrap = (props, children) => {
     const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
-    return (hAsync("div", { class: {
+    return (h("div", { class: {
             'has-label': label !== null && !floatLabel,
             'has-float-label': label !== null && floatLabel,
             'has-helper-end': hasHelperEndSlot,
             rtl,
             'form-ctrl': true,
         } },
-        hAsync("div", { class: "form-ctrl__wrapper" },
+        h("div", { class: "form-ctrl__wrapper" },
             !floatLabel ? renderLabel({ ...props }) : '',
-            hAsync("div", { class: {
+            h("div", { class: {
                     'form-ctrl__input': true,
                     'form-ctrl__textarea': type === 'textarea',
                 } },
                 floatLabel && renderLabel({ ...props, rtl }),
                 children),
-            (showInlineError || hasHelperSlot) && (hAsync("div", { class: "form-ctrl__more", id: moreId },
-                !!showInlineError && (hAsync("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)),
-                hAsync("div", { class: "form-ctrl__helper" },
-                    hAsync("slot", { name: "helper" }))))),
-        hasHelperEndSlot && (hAsync("div", { class: "form-ctrl__helper-end", id: helperEndId },
-            hAsync("slot", { name: "helper-end" })))));
+            (showInlineError || hasHelperSlot) && (h("div", { class: "form-ctrl__more", id: moreId },
+                !!showInlineError && (h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)),
+                h("div", { class: "form-ctrl__helper" },
+                    h("slot", { name: "helper" }))))),
+        hasHelperEndSlot && (h("div", { class: "form-ctrl__helper-end", id: helperEndId },
+            h("slot", { name: "helper-end" })))));
 };
 const FormControl = (props, children) => {
     const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
     const clickThrough = () => {
         control.setFocus();
     };
-    return (hAsync("div", { class: "form-ctrl__input-wrap", ref: (el) => {
+    return (h("div", { class: "form-ctrl__input-wrap", ref: (el) => {
             if (ref)
                 ref(el);
         } },
-        hAsync("span", { class: "form-ctrl__slot-start" },
-            hAsync("slot", { name: "start" }),
+        h("span", { class: "form-ctrl__slot-start" },
+            h("slot", { name: "start" }),
             startSlot),
         children,
-        clearControl && !readonly && !disabled && (hAsync("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
-            hAsync("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))),
-        hAsync("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough },
-            hAsync("slot", { name: "value-end" }),
+        clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
+            h("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))),
+        h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough },
+            h("slot", { name: "value-end" }),
             endValueSlot),
-        hAsync("span", { class: "form-ctrl__slot-end" },
-            hAsync("slot", { name: "end" }),
+        h("span", { class: "form-ctrl__slot-end" },
+            h("slot", { name: "end" }),
             endSlot)));
 };
 
@@ -18288,7 +18337,7 @@ class Input {
         this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]');
         this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
         this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
-        this.datalist = this.el.querySelector('nano-datalist:not([slot])');
+        this.datalist = this.el.querySelector(`${transformTag('nano-datalist')}:not([slot])`);
         // breaking change introduced in v2. Rm in v3
         if (this.el.querySelector('[slot="inline-button"]')) {
             console.warn('The `inline-button` slot was renamed to `end` in v2 - please update your code', this.el);
@@ -18347,15 +18396,16 @@ class Input {
             disabled,
             clearControl: this.clearInput,
         }))(this);
-        return (hAsync(Host, { key: 'd3ba5aeef1a8b0dc6d8184a5baf858a80525c907', "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
+        return (h(Host, { key: 'dfed5ae52b51a714f2aa0218b9cee8081251a2c9', "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
                 ...createColorClasses(this.color),
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid,
-            } }, hAsync("div", { key: 'd8c8488f37aa9474f946d165aa2f91c55886f74f', style: { width: '100%' } }, hAsync(FormControlWrap, { key: '50dc939d11a2704aacc6f967670e2945fd063b89', ...wrapOptions }, hAsync(FormControl, { key: 'fbe48f48485af685c0787dcfdc67a198b9904bd2', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (hAsync("input", { key: '9851de702e37a25a86ccf1935372ec0b3992e127', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (hAsync("textarea", { key: 'b0e639724c3458e45854b31dd17e26839737479d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+                'nano-input': true,
+            } }, h("div", { key: '94d4634ca2fe48cce7f761fb4e6a3d640121baf9', style: { width: '100%' } }, h(FormControlWrap, { key: 'aa8bc2042e5f21fd351acabb4b515fba4cda0dba', ...wrapOptions }, h(FormControl, { key: 'ab008f2dd670122ed5998fdb9dcf004a14e5e274', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (h("input", { key: '2d23e3f0fe71c5d0b5cf56f849b0166dac2d6419', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: '09639dab83617d2153981e04fe61088294b336cc', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), hAsync("slot", { key: '3d2663183a74f118a092ae196855922ab336f43b' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '42e80b566fe4ee06b4a65777d37fd77975f619a0' }))));
     }
     static get watchers() { return {
         "datalist": ["setDataListOpts"],
@@ -18591,7 +18641,7 @@ class IntersectionObserve {
         this.root = this._root = undefined;
     }
     render() {
-        return (hAsync("slot", { key: '75dfdac47190d025c8682bbc2756270130bdbc00', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
+        return (h(Host, { key: 'a6ac2318115344404b0d91677eac05466c547939', class: "nano-intersection-observe" }, h("slot", { key: 'a215889a8c84c513aabea882ac3e3c27879a435f', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],
@@ -18614,7 +18664,7 @@ class IntersectionObserve {
     }; }
 }
 
-const menuCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
+const menuCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
 var NanoMenuStyle0 = menuCss;
 
 /**
@@ -18671,19 +18721,19 @@ class Menu {
     /** Removes any active item's state */
     async resetActiveItem() {
         this.getItems
-            .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
             .map((i) => i.setAttribute('tabindex', '-1'));
     }
     // Private methods
     get getItems() {
         let items;
-        const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');
+        const opened = this.el.querySelectorAll(`${transformTag('nano-nav-item')}.secondary-open`);
         if (opened.length) {
             const ctx = opened[opened.length - 1];
-            items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));
+            items = Array.from(ctx.querySelectorAll(`${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`));
         }
         else {
-            items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');
+            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
         }
         return items.filter((el) => !el.disabled && !el.hidden);
     }
@@ -18700,7 +18750,7 @@ class Menu {
         const items = this.getItems;
         const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
         items
-            .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
             .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
         if (!focus)
             return;
@@ -18741,7 +18791,7 @@ class Menu {
     };
     handleClick = (event) => {
         const target = event.target;
-        const item = target.closest('nano-nav-item');
+        const item = target.closest(transformTag('nano-nav-item'));
         if (item && !item.disabled) {
             this.nanoSelect.emit(item);
         }
@@ -18812,7 +18862,8 @@ class Menu {
     };
     handleMouseOver = (event) => {
         const target = event.target;
-        const item = target.closest('nano-nav-item') || target.closest('nano-option');
+        const item = target.closest(transformTag('nano-nav-item')) ||
+            target.closest(transformTag('nano-option'));
         if (item && !this.ignoreMouseEvents) {
             this.setActiveFocusItem(item);
         }
@@ -18821,11 +18872,11 @@ class Menu {
     componentDidLoad() {
     }
     render() {
-        return (hAsync(Host, { key: '14c788bd695d9a8e93cc8117800d21f125eb3bd4', role: this.type === 'menu' ? 'menu' : 'group' }, hAsync("div", { key: 'a1a3158e0a9a032cbc2c65bd55594243deaeee92', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
+        return (h(Host, { key: '78d73e5aceb8bc9890134c9253834d37c0faf1c3', role: this.type === 'menu' ? 'menu' : 'group', class: "nano-menu" }, h("div", { key: 'e38c5896dc520623bf97392954f278f5ea1b0450', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                 menu: true,
                 ['menu--' + this.type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, hAsync("slot", { key: '272f1ee23857d126cf5a846d6eb74c8b9800514b' }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '213aae294bd3f00e968561ed98716b67c76387a6' }))));
     }
     static get style() { return NanoMenuStyle0; }
     static get cmpMeta() { return {
@@ -18846,7 +18897,7 @@ class Menu {
     }; }
 }
 
-const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
+const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
 var NanoMenuDrawerStyle0 = menuDrawerCss;
 
 /**
@@ -18921,7 +18972,7 @@ class MenuDrawer {
         }
     }
     moveItemsToGlobalNav() {
-        const currNavItems = this.el.querySelectorAll('nano-nav-item');
+        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
         // dimensions not cool - move items out of element and into global nav
         currNavItems.forEach((element) => {
             this.children.push({
@@ -18989,7 +19040,7 @@ class MenuDrawer {
         io.observe(this.measureEle);
     }
     handleGlobalNavReady(e) {
-        if (e.target.tagName !== 'NANO-GLOBAL-NAV')
+        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
             return;
         setTimeout(() => {
             this.attachIO();
@@ -18999,7 +19050,7 @@ class MenuDrawer {
         }, 500);
     }
     componentWillLoad() {
-        this.globalNav = closestElement('nano-global-nav', this.el);
+        this.globalNav = closestElement(transformTag('nano-global-nav'), this.el);
         this.widthOk = window.innerWidth > this.hideWidth;
         this.currHeight = window.innerHeight;
         if (this.saveState) {
@@ -19017,12 +19068,13 @@ class MenuDrawer {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd10d0486b177e5c12549ca21c962241ef445a8b0', class: {
+        return (h(Host, { key: '977db4e79201de998a87723002144d9204789091', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, hAsync("div", { key: 'b443241c91c99e5cd3dabcbc1a3c8f708f09ef70', ref: (div) => (this.containerDiv = div), class: "container" }, hAsync("div", { key: 'b037de8b47085af6068d3ee4221e6d8e5e5d51cb', class: "content-wrap" }, hAsync("nav", { key: 'd6c542ce9e11a1553f7d3c88f8aa0b8295984dfb', ref: (div) => (this.contentDiv = div), class: "content" }, hAsync("button", { key: '3ca749687077cae4aabb4e1ebf4e46655d063b74', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, hAsync("nano-icon", { key: '74a376d7c3843e55636ec44404075b3d25ff95fe', name: "light/right-to-line", "aria-label": "collapse / expand" })), hAsync("slot", { key: '68600c0432bd713668848e39cb8d7c1b1849f699' }), hAsync("div", { key: 'dabd7f784eeb578329e0efc896d214af54e41800', class: "foot" }, hAsync("div", { key: '60980d6c26d32432577bb91096e6ac546ca377f2', class: "measure-ele", ref: (div) => (this.measureEle = div) }), hAsync("slot", { key: '3fef31b9227dcf0423c0abd8f9ded43b867068ba', name: "foot" })))))));
+                'nano-menu-drawer': true,
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '7bc2a2d85dfc8c7ff749f129fe11e5df0d935d94', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'd1ed040d7097e465f029b6cc12501df8003f7dbb', class: "content-wrap" }, h("nav", { key: '4e09d7672d80e481475042fd4cc8ab44cda7cd6f', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5e58c9f3c21d0827545483ef0c6c65bf007a1c0e', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '40948e236760b128caa0f5c99d630642cc207cc4', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '337162928f8f99f2e6933d9c7afbf3b64bdda765' }), h("div", { key: 'd24cbc327b9d2fa1f1dff2332301741f110f3c48', class: "foot" }, h("div", { key: '8efedd05e75e0030cb3cb56a19feb86c14b94328', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1214dfbbf736eb5afeb7de299fd3280beebef7e1', name: "foot" })))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
@@ -20262,7 +20314,7 @@ class NanoAnimation {
         this.animation?.finish();
     }
     render() {
-        return (hAsync(Host, { key: '23a7a8ad212b614a4b3f393cbae03a5a360fe391' }, hAsync("slot", { key: '3097cce8b811db4d9ff0d0c5fbc4632f37399038', ref: (slot) => {
+        return (h(Host, { key: '72df233f997594e16f18fbe6009d5bc3849e8248', class: "nano-animation" }, h("slot", { key: 'cc651438b3697408a642e28369b77efe7c781716', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }
@@ -20309,7 +20361,7 @@ class NanoAnimation {
     }; }
 }
 
-const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:transform 0.2s ease}:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before,:host(.nano-global-nav-bar.selected) button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
+const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(.nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(.nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(.nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(.nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(.nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:transform 0.2s ease}:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before,:host(.nano-global-nav-bar.selected) button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
 var NanoNavItemStyle0 = navItemCss;
 
 /**
@@ -20586,9 +20638,9 @@ class NavItem {
         }
         this.isInGlobalNav = false;
         this.isInMenuDrawer = false;
-        this.globalNavEle = this.el.closest('nano-global-nav');
-        this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');
-        this.isInMenu = !!this.el.closest('nano-menu');
+        this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));
+        this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));
+        this.isInMenu = !!this.el.closest(transformTag('nano-menu'));
         this.isInGlobalNav =
             this.el.parentElement === this.globalNavEle ||
                 !!this.el.closest('.global-nav');
@@ -20602,7 +20654,7 @@ class NavItem {
         this.btn.removeEventListener('blur', this.handleHostBlur);
     }
     render() {
-        return (hAsync(Host, { key: '0eb79d2a46a486734e160a8edec10c5a093c7abd', class: {
+        return (h(Host, { key: '5919fe6851a8132a0da2c592c6adf977113c3983', class: {
                 'has-secondary': this.hasSecondarySlot,
                 'secondary-open': this.open,
                 selected: this.selected,
@@ -20611,15 +20663,16 @@ class NavItem {
                 'nano-global-nav': this.isInGlobalNav,
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-menu': this.isInMenu,
-            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, hAsync("div", { key: 'c0ffc411df072d6b77c70f2ccfaf514da5815d4e', class: {
+                'nano-nav-item': true,
+            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, h("div", { key: 'a05002c6eae1e2107453b02f91f6d7467744bc94', class: {
                 'nav-item': true,
                 'secondary-open': this.open,
                 selected: this.selected,
-            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (hAsync("a", { key: 'a1fc238af0db4cf94b0580148977c85c72f03dc2', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
+            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { key: '7ee0a4a54692664dd7b9d1f9e3d20215542929b3', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
                 notification: this.notification,
-            } }, hAsync("slot", { key: 'ad389bf7d8b2d87a34b38279bc424ad328449535', name: "icon-start" }), hAsync("span", { key: '30cf7490ffba9f5f8b405d39064782dd95ebf3ed', class: "text" }, hAsync("slot", { key: 'f22ec808feb97fe8f5440098a19ffd6e2da410c6' })), hAsync("slot", { key: '203a30b302f86cc60bcf7af98121e529855055c5', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (hAsync("button", { key: '7120168b5eb9998ac1c366bab06599feea55ff2b', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
+            } }, h("slot", { key: '7795fd5db028cd67ba1511619a5be68dc1f3ed51', name: "icon-start" }), h("span", { key: 'e5373722117ca7adc74c0dc59fca8e20f6503099', class: "text" }, h("slot", { key: 'e1e1ebb8b1b18245fb1fff5795ba8c31c967d399' })), h("slot", { key: '63dc5d008a47f44c292ac17bb061944f488b176e', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: 'cd84e3be0022646f164e52663b4b1266c08d582f', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
                 notification: this.notification,
-            } }, hAsync("slot", { key: '28ae44862a415646ae791f11138940bd8b6e0821', name: "icon-start" }), hAsync("span", { key: '3408306940d7bce6981535384cd6d796c7b7b1e5', class: "text" }, hAsync("slot", { key: 'b212e80d2851e5d70b0062d0532ab58c53ab851b' })), hAsync("slot", { key: '46a2c5b43170561ec867b399dfa708d73d4e8f55', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (hAsync("div", { key: 'dc5d755ddad02332a6640fd2f9962c8d4e966b17', class: "link" }, hAsync("slot", { key: 'aa2107c17ad7da11eacc24d1970e882870a93411', name: "icon-start" }), hAsync("slot", { key: '37b90820bd80b8378baec066b9ee5f4cec40d03c' }), hAsync("slot", { key: '32290ce9717eef4484ecc2e98be2fb5677ba7a2b', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (hAsync("div", { key: 'a1027743f1fc4ea6fe633af562f5a1491e3a8457', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, hAsync("div", { key: '5077b6d0af68b1bd44b0a656462475868036f92d', class: "secondary-menu-content", part: "secondary-wrapper" }, hAsync("slot", { key: 'be14db10c9ea0279fde3363672084d7d44c95915', name: "secondary" })), hAsync("div", { key: '36cf6c406d33027b305914c3efc2da8749dc4c15', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
+            } }, h("slot", { key: '9ae194d22d839cf97257c01b1fca424bb4b8e6d1', name: "icon-start" }), h("span", { key: 'eff83bc860b026e62a57b4eede50913d65eabf06', class: "text" }, h("slot", { key: '41996ab72195124b483872ec231a5ca74fc73f9e' })), h("slot", { key: '1ef36027a860dfcf86e0f9f7c90ec49053fad9ff', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: '5c9ab8780e84391ef3b2b1350a8b89e7343b635a', class: "link" }, h("slot", { key: 'a673392b8038993b07c9bcff7312ca63ce077738', name: "icon-start" }), h("slot", { key: '7678cd1e024dc47694849ef3fd2ab89138857675' }), h("slot", { key: '15cedad4ab1d11c4fc0ce7d1867db7bfd59cccd3', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: '8c274fc1b47d8365321105ed13233abaa77bf408', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'f25ebc76515bdce5a8f04119da028b11acc0c9df', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: '8d38f82ab2ebb96ec60d07716309ebc2b45d8f3b', name: "secondary" })), h("div", { key: '07404964bfdce1b0ed694308524f9eef30454efa', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
@@ -20653,7 +20706,7 @@ class NavItem {
     }; }
 }
 
-const optionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
+const optionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 var NanoOptionStyle0 = optionCss;
 
 let optIds = 0;
@@ -20731,12 +20784,12 @@ class Option {
         this.labelChanged();
     }
     render() {
-        return (hAsync(Host, { key: '81da275412fb18c7e96d947c6e4612d8b4a4bfb1', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '65ec11bca28136d886a1ee24c93b0d14b2d3b296', onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, hAsync("div", { key: '5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc', part: "check-icon", class: "option__check" }, hAsync("slot", { key: 'd33caab711a7b07a6d833c5f4fcca8aa1381bcd0', name: "check-icon" }, hAsync("nano-icon", { key: '65255f90b5df1858af89529b6d2df7b5a9264112', name: "light/check", "aria-hidden": "true" }))), hAsync("div", { key: '952469135adf3b50d7a9c647edd861aee0b08c9b', part: "start", class: "option__start" }, hAsync("slot", { key: 'e3b2ab153d5b45de84381e1804d93de64a0bbded', name: "start" })), hAsync("div", { key: '178a8920687128fb0fa78bf5ce7f3f551cced273', part: "label", class: "option__label" }, hAsync("slot", { key: '707a98e2da2413cd77bae52ccebb0004974ecb5e' }, this.label || this.value)), hAsync("div", { key: '66a69defe2beb8f3bd8f68ab94019520fbd9ab21', part: "end", class: "option__end" }, hAsync("slot", { key: '126ebcccc9ed46d2aea3aa6d37672570a8cae5a2', name: "end" })))));
+            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -20760,7 +20813,7 @@ class Option {
     }; }
 }
 
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav .nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav .nano-icon-button.onav__scroll-button:focus{outline:none}.onav .nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav .nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
 var NanoOverflowNavStyle0 = overflowNavCss;
 
 /**
@@ -21076,19 +21129,19 @@ class OverflowNav {
         }
     }
     render() {
-        return (hAsync(Host, { key: '6e173cacb18816d9835c05546a72c43ed91f274c', dir: this.isRtl ? 'rtl' : null }, hAsync("div", { key: '5ccc848ac3de7e32c78f83450e33d8dba423074f', part: "base", class: {
+        return (h(Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
                 'onav--has-scroll-controls-start': !this.hideControlStart,
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { key: '0a322909790d1b93e3325855deae42a3c65c9639', class: "onav__nav" }, this.scrollControls && (hAsync("nano-icon-button", { key: '345635ef806ddb6faf2415cc90ff6a45741864ce', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', 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' })), hAsync("div", { key: '9b78552101a21487b925fefe89d887ac75ca035d', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, hAsync("div", { key: '9d1795efcd4ca224ded919ad90623e97f2603a9d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, hAsync("div", { key: '751c93eea4740df90233e816eda8e11835d0f3ca', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), hAsync("slot", { key: 'c82d3d8ddc3fca334325b5a18ecbb5db78a81df9', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (hAsync("nano-icon-button", { key: '9fe484e4f323155034da3a84ea2b0872c6632fb4', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', 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'
@@ -21147,12 +21200,14 @@ class ProgressBar {
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (hAsync("div", { key: '40563d8a84636d568b0675808bd96cc84c0c4b97', part: "base", class: {
+        return (h(Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, hAsync("div", { key: '32f65f980f9ef0a118ef005ff4ad68c8116b544b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, hAsync("span", { key: '30a5b0e7663a5772c23ff75fc0b4b6bcd59f72ef', part: "label", class: "progress-bar__label" }, hAsync("slot", { key: '1a80db1cb1f65e85f7ba78373e9f2aa7642a542e' }, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+            } }, h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            ? `${this.value}%`
+            : ''))))));
     }
     static get style() { return NanoProgressBarStyle0; }
     static get cmpMeta() { return {
@@ -21557,15 +21612,16 @@ class Range {
             }
         }
         renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, class: createColorClasses(this.color, {
+        return (h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, class: createColorClasses(this.color, {
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
                 'range-has-pin': pin,
                 'range-snaps': this.snaps,
-            }) }, hAsync("div", { class: "range-wrap" }, hAsync("slot", { name: "start" }), hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (hAsync("span", { style: tickStyle(tick), role: "presentation", class: {
+                'nano-range': true,
+            }) }, h("div", { class: "range-wrap" }, h("slot", { name: "start" }), h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("span", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
-            }, part: tick.active ? 'tick-active' : 'tick' }))), hAsync("div", { class: "range-bar", role: "presentation", part: "bar" }), hAsync("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(isRTL, {
+            }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(isRTL, {
             knob: 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
@@ -21586,7 +21642,7 @@ class Range {
                 handleKeyboard,
                 min,
                 max,
-            })), hAsync("slot", { name: "end" }))));
+            })), h("slot", { name: "end" }))));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -21628,7 +21684,7 @@ const renderKnob = (isRTL, { knob, value, ratio, min, max, disabled, pressed, pi
         style[start] = `${ratio * 100}%`;
         return style;
     };
-    return (hAsync("div", { onKeyDown: (ev) => {
+    return (h("div", { onKeyDown: (ev) => {
             const key = ev.key;
             if (key === 'ArrowLeft' || key === 'ArrowDown') {
                 handleKeyboard(knob, false);
@@ -21647,7 +21703,7 @@ const renderKnob = (isRTL, { knob, value, ratio, min, max, disabled, pressed, pi
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
-        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (hAsync("div", { class: "range-pin", role: "presentation", part: "pin" }, Math.round(value))), hAsync("div", { class: "range-knob", role: "presentation", part: "knob" })));
+        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, Math.round(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;
@@ -21722,9 +21778,9 @@ class Rating$1 {
         this.handleShowHideElements();
     }
     render() {
-        return (hAsync(Host, { key: 'f027eeb0a9a1874b4e98686b9e501ddc44d4c632' }, hAsync("slot", { key: '98bf588c101034356091253382ccebdbe67a78f1', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            hAsync("div", { key: 'd4748dec7f25dbeb0e9d4cf27a9857dc6411c349', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, hAsync("slot", { key: 'c5b5d9b781761ece8d917391c132c3768838b6cd', name: "less" }, hAsync("button", { key: '31d16fe52e896736bcc1d9617ad54aa4d5b69f47', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
-            !this.noHideBtn ? (hAsync("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, hAsync("slot", { name: "more" }, hAsync("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
+        return (h(Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+            !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }
     static get watchers() { return {
@@ -21748,7 +21804,7 @@ class Rating$1 {
     }; }
 }
 
-const ratingCss = ".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";
+const ratingCss = ".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";
 var NanoRatingStyle0 = ratingCss;
 
 /**
@@ -21923,23 +21979,23 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (hAsync("div", { key: '71577f298741ece02dc6655e5275d00dedd37b86', class: "rating-wrap" }, hAsync("div", { key: '1970dd80f9783316eddb98501f1e5f1e8e0325c9', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: 'e7aec714fffd7abf991de7f31712d6a85a67ee75', class: "nano-rating" }, h("div", { key: '1865bfccf63d3b544e394abb8e4c9141636dd930', class: "rating-wrap" }, h("div", { key: '5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da', 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 }, hAsync("span", { key: '4d341aa10271c68e94379babdd4f88d9c436dbcb', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (hAsync("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 }, h("span", { key: '118a16e603a53cbfc515297eb347705277118ca1', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (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) })))), hAsync("span", { key: '13a214cc0d52fedcf48953e17e0d2e2e14ded9f9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'b299dae6997acbcece7582efd9f99858cf30b22b', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
-            } }, counter.map((index) => (hAsync("span", { class: {
+            } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), hAsync("input", { key: '4dd7a72137134862bea4524ce4e54a828640ba3d', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7e134eb0de5e255b474e567406a0ae4f027aa83b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
@@ -22202,10 +22258,10 @@ class ResizeObserve {
             this.ro.disconnect();
     }
     render() {
-        return (hAsync(Host, { key: '09a3b9f8a724f07ba84eec73378725dec973773a' }, hAsync("slot", { key: '2f990e9c1ee91e1392a370d07ff988cb3abc3e42' }), !!this.notifyContentFit &&
+        return (h(Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
-            this.contentFitX ? (hAsync("slot", { name: "content-fit-x" })) : (hAsync("slot", { name: "content-nofit-x" })),
-            this.contentFitY ? (hAsync("slot", { name: "content-fit-y" })) : (hAsync("slot", { name: "content-nofit-y" })),
+            this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
+            this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
         ]));
     }
     static get watchers() { return {
@@ -22233,7 +22289,7 @@ class ResizeObserve {
     }; }
 }
 
-const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
+const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select .nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
 var NanoSelectStyle0 = selectCss;
 
 let selectIds = 0;
@@ -22935,7 +22991,7 @@ class Select {
             disabled,
             clearControl: this.clearSelect,
         }))(this);
-        return (hAsync(Host, { key: 'c502d4583477fe519d887218489a85dadc646b54', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 ...createColorClasses(this.color),
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
@@ -22946,24 +23002,25 @@ class Select {
                 'has-multiple': this.multiple,
                 'has-clr-btn': this.clearSelect,
                 masked: this.mask,
-            } }, hAsync(FormControlWrap, { key: '3f49832dcd734add1f1f0d0b3c2eb019265e77a6', ...wrapOptions }, hAsync(FormControl, { key: '76c78e814fd758013ca71bcbfb52e85c590d3fe2', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: hAsync("slot", { name: "down-arrow" }, hAsync("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (hAsync("div", { key: '221256f2fa8a23e0cca276a0a9d52e8217a4f25f', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (hAsync("div", { key: '62f2382db6a70c475a472652b5e6782410597ce7', class: "select__mask" }, this.getLabel(this.value))),
-            hAsync("input", { key: 'd6ad0f054432a260fec28d42e8b9857ac3940b15', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (hAsync("nano-datalist", { key: '35f1f561b12baf5ac99d31f4b023ae560241ffdb', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+                'nano-select': true,
+            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (hAsync("nano-option", { key: '72f666535c2c4a5dcf87f21a25b5fbdf18ac3bd6', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, hAsync("span", { key: '45b9dd148ffffcf7c3fa971d031ae80c7d9c8ba1', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), hAsync("slot", { key: '3c8708ac47ed4b000d8cc087c6cffddd058c7493' }))), hAsync("select", { key: 'd2f28c4bc3f6bc5495a9f3df6b19dc4c99778543', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
-                return (hAsync("option", { value: val, selected: true }, val));
+                return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
             this.options.map((opt) => {
-                return (hAsync("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
+                return (h("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
             }))));
     }
     multipleValues(labelId, moreId, helperEndId) {
-        const input = (hAsync("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
+        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
         if (!this.value.length)
             return input;
         const toReturn = [];
@@ -22972,16 +23029,16 @@ class Select {
                 return;
             let valueTag;
             if (i === this._maxValuesVisible) {
-                valueTag = (hAsync("span", { "data-value": val, class: "select__multi-value" }, hAsync("span", null, "+", this.value.length - this._maxValuesVisible)));
+                valueTag = (h("span", { "data-value": val, class: "select__multi-value" }, h("span", null, "+", this.value.length - this._maxValuesVisible)));
             }
             else {
-                valueTag = (hAsync("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value select__multi-value--closable" }, this.valueTagTemplate ? (hAsync("span", { innerHTML: this.valueTagTemplate
+                valueTag = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value select__multi-value--closable" }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
                         ? this.valueTagTemplate(...this.getOptionWithValue(val))
-                        : undefined })) : (hAsync("span", null, this.getLabel(val))), hAsync("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
+                        : undefined })) : (h("span", null, this.getLabel(val))), h("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
                         this.removeValue(val);
                     }, onMouseUp: () => {
                         this.removeValue(val);
-                    } }, hAsync("nano-icon", { name: "light/xmark" }))));
+                    } }, h("nano-icon", { name: "light/xmark" }))));
             }
             if (i === 0 && this.currInsertIndex < 0) {
                 toReturn.push(input, valueTag);
@@ -23075,10 +23132,10 @@ class Skeleton {
     /** When `true`, the skeleton will animate. */
     animated = true;
     render() {
-        return (hAsync("div", { key: '39135db0beb9ba3fdda2e0fe9d82e08f3bc8c118', class: {
+        return (h(Host, { key: '97ea058a91c14ec6cb5707d5f7c36ce71836db88', class: "nano-skeleton" }, h("div", { key: '97aaf3eb540c1e8671c661e0f1e7cebb260f057b', class: {
                 skeleton: true,
                 animate: this.animated,
-            } }, hAsync("div", { key: '55bc13ba8fd8ae10afa64e670d56494438809a4a', class: "skeleton__indicator" }, "\u00A0")));
+            } }, h("div", { key: '378a1c6168fa2462e81da0205f55c58260c52cac', class: "skeleton__indicator" }, "\u00A0"))));
     }
     static get style() { return NanoSkeletonStyle0; }
     static get cmpMeta() { return {
@@ -23127,7 +23184,7 @@ class Slide$2 {
         });
     }
     render() {
-        return (hAsync(Host, { key: '7f911e5951cdf2231e006a0570f8bba180d5b8b5' }, hAsync("slot", { key: '4bf3089b26f9ba5f4da7c9eb6ffb2a380dcbaabd' })));
+        return (h(Host, { key: 'e43f75894bf356f5f7bc6628e66eb348b3c5fa43', class: "nano-slide" }, h("slot", { key: 'c043cf5ce0137f9dae9d68801f69d14e204f915b' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -25842,7 +25899,7 @@ class Slides {
             this.getflickity(),
             waitForSlides(this.host),
         ]);
-        this.childrenEles = this.host.querySelectorAll('nano-slide > *');
+        this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
         flickity.reloadCells();
         flickity.resize();
         flickity.reposition();
@@ -26072,7 +26129,7 @@ class Slides {
     normalizeOptions() {
         // Base options, can be changed
         const flickityOptions = {
-            cellSelector: 'nano-slide',
+            cellSelector: transformTag('nano-slide'),
             contain: true,
             prevNextButtons: true,
             fullscreen: this.fullscreen,
@@ -26138,15 +26195,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (hAsync(Host, { key: '9e97a224eef505b29bf19db52c901ba85c058f54' }, hAsync("div", { key: 'e3b0778a1b68bf78fe52abc32c74f30e278a00e4', class: {
+        return (h(Host, { key: 'fec3c2951cb3865b5a90817750783f60791c8152', class: "nano-slides" }, h("div", { key: '6e7da38e24396ff8f274ecf1f12523561f68d7b9', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, hAsync("div", { key: 'da56ec590908be9a10be1fc41bbf83fa3216e674', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '4a80ee977b2c6adab8667be4d5737ee2b3991c12', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, hAsync("slot", { key: '12d359c67d1f30245e7aef788018697b0c0b94ee' })), hAsync("div", { key: '8a0a0190ea93acb5ba932b353baa6cbbae33547b', class: "ui-extras" }, hAsync("slot", { key: 'fddc2df69c989ac09e5908a8953783b9ae32d3ba', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: '34ff051519aeba458f99ea0d164a0acd1bd547cc' })), h("div", { key: '91192bf437b0c614a7f349f4ae7c0740f6768ea7', class: "ui-extras" }, h("slot", { key: 'e278a3193b7b9c4b88f6245cc63def6f2f4dd941', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -26196,7 +26253,7 @@ class Slides {
     }; }
 }
 const waitForSlides = (host) => {
-    const allSlides = Array.from(host.querySelectorAll('nano-slide'));
+    const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
     let toLoadSlides = allSlides.filter((ele) => !ele.ready);
     if (!toLoadSlides.length)
         return Promise.resolve(allSlides);
@@ -26991,7 +27048,7 @@ class Sortable {
         }
     }
     render() {
-        return (hAsync(Host, { key: '8d0009173c5f2c5dae0285ccbf957d41523d56fa' }, hAsync("div", { key: 'f0f1f16a37381fc56dcf7ea612f885b0a8bd1e8a', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (hAsync("div", null, str)))), hAsync("slot", { key: '438e2a954c09a3b48a3c45d8bea14d0559bf1eb0' })));
+        return (h(Host, { key: 'c9bce5fa4dd5410d54d84a41ab8ece10d316ede0', class: "nano-sortable" }, h("div", { key: 'beffbe43a385e254cb696cb5ba98797c0a8be718', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '9a552eeb74869b9825311907172f44ea0358a3cb' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -27053,7 +27110,7 @@ class Spinner {
         this.hasText = !!this.el.childNodes.length;
     }
     render() {
-        return (hAsync("div", { key: 'bf3c9c701299ad688a9befe51ebb57a005af5eb1', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, hAsync("div", { key: 'd3ead911719c415b15ea0aefec292f8205f36f43', class: "spinner__loader" }, this.type === 'dna' && (hAsync("div", { key: '69d9f55f9fc1c9b7a786c73f2b3773bbe5f04cfe', class: "spinner__dna" }, hAsync("div", { key: '7e3cddb01607045969421bbff175138e2c7e2171', class: "spinner__dnatrack spinner__dnatrack--1" }, hAsync("div", { key: '20552425058b7148cf7ab750330cd650bb653cd3', class: "spinner__dnadot spinner__dnadot--1" }), hAsync("div", { key: '9d41cf549c34ecd465fba4e18f138b25df9f627c', class: "spinner__dnadot spinner__dnadot--2" })), hAsync("div", { key: '5f69f3e654d9082aa06d72f37ad5b39094a923b6', class: "spinner__dnatrack spinner__dnatrack--2" }, hAsync("div", { key: 'd7744a929bd439d7eae49f06f1b49b8dba527991', class: "spinner__dnadot spinner__dnadot--3" }), hAsync("div", { key: 'df64b356ac817c45e43f80c5dc8bcb31b29ff2c0', class: "spinner__dnadot spinner__dnadot--4" })), hAsync("div", { key: '462fc990493da3b6947a32eca06c63ec3797fa33', class: "spinner__dnatrack spinner__dnatrack--3" }, hAsync("div", { key: '75e5beaceda3aa7eb2a1c0f2055257990d7da440', class: "spinner__dnadot spinner__dnadot--5" }), hAsync("div", { key: '4387620a95ce780d9c47accbd4bf7b24bd0cf707', class: "spinner__dnadot spinner__dnadot--6" })), hAsync("div", { key: 'edf7dee0f9c6fec893eb3721fa1e798fc5926523', class: "spinner__dnatrack spinner__dnatrack--4" }, hAsync("div", { key: '3787f671edd1390969f56cca251a7d41b5db4a19', class: "spinner__dnadot spinner__dnadot--7" }), hAsync("div", { key: '239a8fefdf0c875e8aa950b17966d31d399bcf54', class: "spinner__dnadot spinner__dnadot--8" })), hAsync("div", { key: '0a713f87acb9b744f8566ee30c32a3f85ddfe6a1', class: "spinner__dnatrack spinner__dnatrack--5" }, hAsync("div", { key: 'e4b28fd81404fee9e52a1dae5ddc2579f5d90dc5', class: "spinner__dnadot spinner__dnadot--9" }), hAsync("div", { key: '3707286cd22fa5c2f24e1d2fcba0bcd500c69b86', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && hAsync("span", { key: '0caad855007af9134362e12c39be0fa79fc8f987', class: "spinner__spin" })), this.hasText && (hAsync("div", { class: "spinner__text", key: "spinner-text" }, hAsync("slot", { key: '724dce48bfb1f48c531138f67c39a1e8ea01ec79' }))), this.overlay && (hAsync("div", { class: "spinner__overlay", key: "spinner-overlay" }))));
+        return (h(Host, { key: '650f22e1f076d786590389993562fb03d73b50d5', class: "nano-spinner" }, h("div", { key: '392afaac4ae23acdc247a7d4d5dea7166beaa6f4', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: '71699c822304d7bc40bc6510a373bd6da4905dc0', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'f3cf1be6056a3aacd9f08fb2ba20a0196a751912', class: "spinner__dna" }, h("div", { key: '9fbc4e80ce66f14751001ed7e9559e01649d1e7b', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '1242c2d9c928cf0e371133335ad05dc1e1426380', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1dcfced70f0813796681ca5049fb50144d83e9ec', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'cdb111d45ddbab07c9c0fed293bff499e306215e', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '326aa2074a4e16f7d6fddc41354672188c602f70', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: 'd436ba81949ada55d5fe2356e663ba1b2f24f1fd', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'ad2b9393afa3d2e9109fe7af696ab06001541344', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'db18ff89bdfa702a733e817099ec03e550b7a967', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '812f51e0fdb34fae89c048fef6925feeed8e5d7f', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'e53e41b6adc1fbf35ae07f7e0783b097d5a201db', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '0407e5a7234424094b1bc452a6f3bfe2c38ad7a7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'f9c9ee014b3cb7df2f6ca9e1f5ef6fc21a7b2c5c', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '3af97dda00e1ed9eaa738a2e0167f59916a69dbe', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '1f49f2d13828475a24dc318f3f28cca6973e01d5', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: '5aee21e437ab1f35a35a1616e170ce1fed8d2811', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '3e87f7a4aca4c55d750b6f01d14f83c8c9b232e8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '1e3e90c45121e16f4297ccf31d3809910d5721cf' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
     }
     static get style() { return NanoSpinnerStyle0; }
     static get cmpMeta() { return {
@@ -27361,7 +27418,7 @@ class SplitPane {
         else {
             styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
         }
-        return (hAsync(Host, { style: styles }, hAsync("div", { part: "panel start", class: "start" }, hAsync("slot", { name: "start" })), hAsync("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, hAsync("slot", { name: "handle" }, !this.disabled && this.vertical ? (hAsync("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (hAsync("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), hAsync("div", { part: "panel end", class: "end" }, hAsync("slot", { name: "end" }))));
+        return (h(Host, { style: styles, class: "nano-split-pane" }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
     }
     static get watchers() { return {
         "position": ["handlePositionChange"],
@@ -27953,7 +28010,7 @@ class Sticker {
         this.quietModeChange();
         this.listenForScrollParent = true;
         this.handleParentEvents(true);
-        this.stickerIndex = Array.from(this.scrollParent.querySelectorAll('nano-sticker'))
+        this.stickerIndex = Array.from(this.scrollParent.querySelectorAll(transformTag('nano-sticker')))
             .filter((sticker) => sticker.position === this.position)
             .findIndex((sticker) => sticker === this.host);
         this.setOffset();
@@ -27995,12 +28052,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (hAsync(Host, { key: '8446391b0510c305f2bead6865154636c329ab9f', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start') }, hAsync("div", { key: '2465296095699dd336a3f0af5663e61b151807eb', class: {
+        return (h(Host, { key: 'b282e10cddb66120a13fcade77d1f2b554a20579', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '33b8b8a569e522809bc9dd8efba10282728117a8', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, hAsync("div", { key: '351a73899ac20bb834f9610d4210c4860b3db836', class: "sticker-content", ref: (div) => (this.content = div) }, hAsync("slot", { key: 'eacb03d1f9e5637b352bb28b80f60d50bf3b5ac1' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'bc0584d28222ecaa8c362817ef3a71f618fe4796', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '12f6f6dca5d58ccdc446aee97cd5bee39f3c322e' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -28104,12 +28161,12 @@ class Tab {
             this.handleCloseClick();
     };
     render() {
-        return (hAsync(Host, { key: 'd563546e0cf992e2dd33534b6a39706e1ed3094a', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false' }, hAsync("div", { key: 'a467e6b0bf36c32efe02a00f7596eaea92ac21c9', part: "base", class: {
+        return (h(Host, { key: '9204530dd88067b2d463fb75e96094856f5b96f8', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '13093d143297235f93f4d79bbb8c893cfff69b6c', part: "base", class: {
                 nanotab: true,
                 'nanotab--active': this.active,
                 'nanotab--disabled': this.disabled,
                 'nanotab--closable': this.closable,
-            } }, hAsync("slot", { key: 'b7d6bfeca2bb488155bfdb7c2c7ab97ef6f68280', name: "start" }), hAsync("div", { key: '035e2c120ed6773969dee5477b871314938e60d2', part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, hAsync("slot", { key: '6690cc8020408cd2b30bfcc5b5eac9f24e461156' })), this.closable && !this.disabled && (hAsync("nano-icon-button", { key: '4dc8951c12d07a89acfec20dbc722bb147cae53d', label: "Close this tab", iconName: "light/xmark", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), hAsync("slot", { key: '0f54d47bb9b53e5de97ca9ed6b4362087727c8f6', name: "end" }))));
+            } }, h("slot", { key: '89560d0bc1eb63f654cd67859d20f6a2f7156c6c', name: "start" }), h("div", { key: '2960d4c7ecb1a69d578b46a2a3dc0fce8420cf1b', part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", { key: '8060e84517e8b156b8bec769ff3f3dade3999720' })), this.closable && !this.disabled && (h("nano-icon-button", { key: '0ed730a6b5161e631e4750ff818d03a9144ff5b8', label: "Close this tab", iconName: "light/xmark", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { key: '2dbdea7e63a88719e597bc7237f2f9fdf5ed3ee8', name: "end" }))));
     }
     static get style() { return NanoTabStyle0; }
     static get cmpMeta() { return {
@@ -28129,7 +28186,7 @@ class Tab {
     }; }
 }
 
-const tabGroupCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (width <= 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:\"\";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:\" \";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}";
+const tabGroupCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (width <= 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(.nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(.nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button .nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:\"\";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:\" \";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}";
 var NanoTabGroupStyle0 = tabGroupCss;
 
 let id$2 = 0;
@@ -28259,10 +28316,10 @@ class TabGroup {
         return this.getAllTabs.filter((el) => !el.disabled);
     }
     get getAllTabs() {
-        return getDirectChildren(this.host, 'nano-tab');
+        return getDirectChildren(this.host, transformTag('nano-tab'));
     }
     get getAllPanels() {
-        return getDirectChildren(this.host, 'nano-tab-content');
+        return getDirectChildren(this.host, transformTag('nano-tab-content'));
     }
     get getActiveTab() {
         return this.getAllActiveTabs.find((el) => el.active);
@@ -28387,18 +28444,19 @@ class TabGroup {
     }
     handleClick = (event) => {
         const target = event.target;
-        const tab = target.closest('nano-tab');
+        const tab = target.closest(transformTag('nano-tab'));
         if (tab)
             this.setActiveTab(tab);
     };
     handleKeyDown = (event) => {
         const activeEl = document.activeElement;
-        if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab')
+        if (!activeEl ||
+            activeEl.tagName.toLowerCase() !== transformTag('nano-tab'))
             return;
         // Activate a tab
         if (['Enter', ' '].includes(event.key)) {
             const target = event.target;
-            const tab = target.closest('nano-tab');
+            const tab = target.closest(transformTag('nano-tab'));
             if (tab) {
                 this.setActiveTab(tab);
                 event.preventDefault();
@@ -28595,20 +28653,20 @@ class TabGroup {
     }
     render() {
         this.isRtl = this.host.ownerDocument.dir === 'rtl';
-        return (hAsync(Host, { key: '8d4967674baaec3b7e35725357bd97373e87dde4', class: { ...createColorClasses(this.color) }, dir: this.isRtl ? 'rtl' : null }, hAsync("div", { key: 'c328e6cf7a72d29693313364b6c51805219c3277', part: "base", class: {
+        return (h(Host, { key: 'babc67784c37d7ba1c148f2b6672d1e9b2deda19', class: { ...createColorClasses(this.color), 'nano-tab-group': true }, dir: this.isRtl ? 'rtl' : null }, h("div", { key: '7e290c2c4db866dab8444904b90c1abcf1fb8c95', part: "base", class: {
                 'nano-tab-group': true,
                 'nano-tab-group--top': this.placement === 'top',
                 'nano-tab-group--start': this.placement === 'start',
                 'nano-tab-group--has-scroll-controls': this.hasScrollControls,
                 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
                 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { key: '8e83f952666a05adbd6a41ba736749ab7b26a72a', class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (hAsync("button", { key: '91844d716eb09a39971810a456deb1c4e00eeb52', disabled: !this.hasScrollControls, class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'af7e627ddbeb08b811ec8b41e240ef1cd28ab7aa', class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (h("button", { key: '9b44ad15be0ec455ba92172edd98164a096f61f8', disabled: !this.hasScrollControls, class: {
                 'nano-tab-group__scroll-button': true,
                 'nano-tab-group__scroll-button--left': true,
-            }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, hAsync("nano-icon", { key: 'bb3a0ab77f3e743b6f114d95ce926b5d56f15822', name: "light/chevron-left", ariaLabel: "Scroll tabs towards the start" }))), hAsync("div", { key: '27668528c2ae2b4a0f108a0a0b047eca8ec5938f', ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, hAsync("div", { key: '957c570aeaf454c04b5f5ff21a1f0de7edeca69a', ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, hAsync("div", { key: 'b8aa45670f49a8d9a5010067c5911abbaf208309', ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), hAsync("slot", { key: '9abb15e1c0c72e26c9b2c22cf22434177d3547bb', name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (hAsync("button", { key: '51aa3796262bd0b38a70e8341ebb2657fafc91e3', disabled: !this.hasScrollControls, class: {
+            }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { key: 'c649dadd477ebc80b84772e949103e52c9ef7412', name: "light/chevron-left", ariaLabel: "Scroll tabs towards the start" }))), h("div", { key: '5d013ca00f3adabc6c3571b08a985ca52e8fbc7b', ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { key: '49b533c77d65eb3165dbded564c7eab9802688d8', ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, h("div", { key: '281f29351daf0deae5895e5424956ece03e86b46', ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { key: '2d3c27fe7b67b5c58368421b716cf0a29f435d78', name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (h("button", { key: '883cba058e294b9516a9cd8af6c85f1c50ddaec7', disabled: !this.hasScrollControls, class: {
                 'nano-tab-group__scroll-button': true,
                 'nano-tab-group__scroll-button--right': true,
-            }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, hAsync("nano-icon", { key: 'e1bbe3649b50ad1d4a9f10772b010ece7d70401b', name: "light/chevron-right", ariaLabel: "Scroll tabs towards the end" })))), hAsync("slot", { key: '020cca6e8b7970cfa5a6a3b67f43a8e46bb9b006', name: "tab-content-header" }), hAsync("div", { key: '7caf231a70ccb0bd804c321e75576bd254480d6a', part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync("slot", { key: '83e5b7705b469f79763fc68ae77a46f284779ccf', onSlotchange: this.handleContentSlotChange })))));
+            }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, h("nano-icon", { key: 'c3d70037fe6e12370f2e0547cdd98df1e95f3004', name: "light/chevron-right", ariaLabel: "Scroll tabs towards the end" })))), h("slot", { key: '2f1239ebc94dff329eb520388cd0da59d60190ba', name: "tab-content-header" }), h("div", { key: 'a13f28ad6ecc75c5702b92db8cea3be4cbe360d7', part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { key: '42e2b6133c478357b1a105af2961235bb4d0fe92', onSlotchange: this.handleContentSlotChange })))));
     }
     static get watchers() { return {
         "tab": ["handleTabNameChange"],
@@ -28663,9 +28721,10 @@ class TabPanel {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (hAsync(Host, { key: '508cfb7387f87be8af8a9db89081df45a922a420', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '08abcc599bd876200b180401e671ddbd6a9bf32f', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
-            } }, hAsync("div", { key: '9aa9cb6f89a514d7cfa8b102aaf465fe5e73fe91', part: "base", class: "nano-tab-content" }, hAsync("slot", { key: '0f76d3389f17a4262b0cf27ddd4a4c6045df8e4c' }))));
+                'nano-tab-content': true,
+            } }, h("div", { key: '11c30baa5c02d8ad2d134e18ab7757482cbf64a1', part: "base", class: "nano-tab-content" }, h("slot", { key: 'e57eea4e5a61fdc5b57d9c745ea479055f3caa13' }))));
     }
     static get style() { return NanoTabContentStyle0; }
     static get cmpMeta() { return {
@@ -29899,7 +29958,7 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
     let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
     const content = colheadFootRender(column);
     if (!content)
-        return hAsync(Fragment, null);
+        return h(Fragment, null);
     props =
         Number(props.colSpan) > 1
             ? { ...props, scope: 'colgroup' }
@@ -29912,18 +29971,18 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
             : 'none';
         props = { ...props, 'aria-sort': sort };
     }
-    return (hAsync("th", { ...props, key: column.prop }, isSortable() ? (hAsync("button", { class: {
+    return (h("th", { ...props, key: column.prop }, isSortable() ? (h("button", { class: {
             [`${CSSNAMESPACE}__order-btn`]: true,
             [`${CSSNAMESPACE}__cell-content`]: true,
         }, onClick: handleColumnSortClick },
         colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/filter" })),
+        column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/filter" })),
         !!column.order &&
-            (column.order === 'desc' ? (hAsync("nano-icon", { name: "solid/arrow-down-long" })) : (hAsync("nano-icon", { name: "solid/arrow-up-long" }))),
-        hAsync("div", { class: `${CSSNAMESPACE}__status-icons` },
-            hAsync("nano-icon", { name: "light/chevron-down" })))) : (hAsync("div", { class: `${CSSNAMESPACE}__cell-content` },
+            (column.order === 'desc' ? (h("nano-icon", { name: "solid/arrow-down-long" })) : (h("nano-icon", { name: "solid/arrow-up-long" }))),
+        h("div", { class: `${CSSNAMESPACE}__status-icons` },
+            h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` },
         colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/bars-filter" }))))));
+        column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/bars-filter" }))))));
 };
 
 // TABLE CELL
@@ -29953,7 +30012,8 @@ function cellRender(rowIndex, colIndex) {
     let hCalled = false;
     const hWrap = (...args) => {
         hCalled = true;
-        return hAsync(...args);
+        // @ts-expect-error - h mismatch
+        return h(...args);
     };
     let tplResult = tpl ? tpl(hWrap, model) : undefined;
     if (tplResult &&
@@ -29969,7 +30029,7 @@ function cellRender(rowIndex, colIndex) {
         // custom rendering can render to the templateEle OR return a promise<string>
         tplResult = result && result['then'] ? result : templateEle;
     }
-    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, model.cellModel?.toString())) : ('');
+    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();
@@ -29988,7 +30048,7 @@ const baseCellClasses = (colIndex, toString = false) => {
 const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
     const Content = () => nestedContent
         ? nestedContent()
-        : cellRender(rowIndex, colIndex) || (hAsync("span", { class: "placeholder" }, "\u00A0"));
+        : cellRender(rowIndex, colIndex) || (h("span", { class: "placeholder" }, "\u00A0"));
     let CellType = 'td';
     const tableInstance = getRenderingRef();
     const store = fetchStores();
@@ -30005,7 +30065,7 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
     }
     const ContentWrap = (props) => {
         const content = Content();
-        return (hAsync("div", { ref: (d) => {
+        return (h("div", { ref: (d) => {
                 if (!d)
                     return;
                 if (content instanceof Element) {
@@ -30027,20 +30087,20 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
             !(content instanceof Element) &&
             content));
     };
-    return (hAsync(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (hAsync("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+    return (h(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
             e.detail.x) },
-        hAsync("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
-            hAsync(ContentWrap, null),
-            hAsync("span", { slot: "content" },
-                hAsync(Content, null))))) : (hAsync(ContentWrap, null))));
+        h("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
+            h(ContentWrap, null),
+            h("span", { slot: "content" },
+                h(Content, null))))) : (h(ContentWrap, null))));
 };
 
 const tableCellContent = (props, children, ctx) => {
-    const cell = (hAsync("div", { ...props.wrapperProps, class: {
+    const cell = (h("div", { ...props.wrapperProps, class: {
             [`${CSSNAMESPACE}__cell-content`]: true,
             [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
         } }, children));
-    return props.header ? (hAsync("th", { scope: ctx, ...props.cellProps }, cell)) : (hAsync("td", { ...props.cellProps }, cell));
+    return props.header ? (h("th", { scope: ctx, ...props.cellProps }, cell)) : (h("td", { ...props.cellProps }, cell));
 };
 const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
     // helper, generates <td> or <th>
@@ -30079,8 +30139,8 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
         });
     };
     if (tpl) {
-        let toRender = tpl(hAsync, {
-            renderedRow: (hAsync("tr", { ...props, key: rowModel.__uuid }, children)),
+        let toRender = tpl(h, {
+            renderedRow: (h("tr", { ...props, key: rowModel.__uuid }, children)),
             rowModel,
             rowIndex,
         }, TableCell);
@@ -30099,7 +30159,7 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
         }
         return toRender;
     }
-    return (hAsync("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
+    return (h("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
 };
 const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
 children, utils) => {
@@ -30115,8 +30175,8 @@ children, utils) => {
     const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
     const tpl = rowRenderer?.template;
     if (tpl) {
-        let toRender = tpl(hAsync, {
-            renderedRow: hAsync("tr", { ...props }, children),
+        let toRender = tpl(h, {
+            renderedRow: h("tr", { ...props }, children),
         }, TableHeadFootCell);
         if (Array.isArray(toRender)) {
             toRender = utils.map(toRender, (node) => {
@@ -30138,7 +30198,7 @@ children, utils) => {
         }
         return toRender;
     }
-    return hAsync("tr", { ...props }, children);
+    return h("tr", { ...props }, children);
 };
 
 function addStyleSheet(id, css) {
@@ -30525,7 +30585,7 @@ class TablePinService {
     }
 }
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}";
 var NanoTableStyle0 = tableCss;
 
 const measurePerf = false;
@@ -31297,34 +31357,34 @@ class Table {
     }
     render() {
         this.blockElements = [];
-        return (hAsync(Host, { key: '0dfa70321c64a0bcf724a2d569002ad2a7628b3e' }, hAsync("div", { key: '2529765a9a47555b0ffc7a6c102f5ee8c8e826c6', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), hAsync("nano-resize-observe", { key: '2064df2843d52c767582bd55f5c80402b88a961a', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
+        return (h(Host, { key: '7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa', class: "nano-table" }, h("div", { key: 'acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { key: '9a38da33f0cfb64329331510f196ef7c42e51ca3', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
                 if (this.tablePinnedService)
                     this.tablePinnedService.onResize();
-            } }), hAsync("div", { key: '6d5bb14190158f9048d80e7c798bfd2f5187903b', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, hAsync("nano-progress-bar", { key: 'bc3c93ec5824ad7b422d16245358fd48e02c739c', indeterminate: true, class: {
+            } }), h("div", { key: '25aad643f108a5e48319a20a70a36066eb099d5d', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { key: '519fc388c4926af6bd9dfaba2112fa2db1dbc3cd', indeterminate: true, class: {
                 [`${CSSNAMESPACE}__progress-bar`]: true,
                 [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), hAsync("table", { key: 'a606496f55694b411e2d6c205a83f542046f3dd0', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, hAsync("caption", { key: '90119adabff158e080227d8a3861e447841d9b20', class: {
+            } }), h("table", { key: 'b58a665666893b4b15aad6ab7e7a08bd20527cb2', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h("caption", { key: '5bc653ff3a487546e652cd787996dfde662fdf67', class: {
                 [`${CSSNAMESPACE}__caption`]: true,
                 [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-            }, id: 'nano-table-caption-' + this.renderId }, hAsync("slot", { key: 'f6c0350ebd2ad4830bf78f1a585bace5ce1952b6', name: "caption" }, this.caption)), hAsync("thead", { key: '7025ca54cd2abd4e2e62e5cf96c54e0f17a70040' }, hAsync(TableHeadFootRow, { key: '099e17abd7c52510e7c9ba86eee41b46633a30eb', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
-            hAsync(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
+            }, id: 'nano-table-caption-' + this.renderId }, h("slot", { key: 'a6c855db5a74c123d08ad4e65954f17573c9ea3a', name: "caption" }, this.caption)), h("thead", { key: '743820b2abc85adac1fe4babf918be10a8e62a26' }, h(TableHeadFootRow, { key: 'e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
+            h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (hAsync("tbody", { key: 'ea169915fac335b9a07d1eccc410524d32d76fc4', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (hAsync("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => hAsync("nano-skeleton", null) })))))))), hAsync("tr", { key: '6b2a9cb5d8ff0d3388086fe3ea87eea5a9ef9f15', hidden: !!this._loading || !!this.blocks.length }, hAsync("th", { key: '25e7f61517a3908cd63d086566180796b0f7186f', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, hAsync("div", { key: 'f6aa064a71d2c90d20a23eb7ad357b7f944b941b', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, hAsync("slot", { key: 'a6b0dcf69763081eda4da4cf8d558096b169d314', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (hAsync("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h("tbody", { key: '6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { key: '092f27f8726f12b7fa10d166b560d6df6593bbc1', hidden: !!this._loading || !!this.blocks.length }, h("th", { key: 'edfbca925f99550897c3b460a6efcb326863a591', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { key: '5d4b996c3141b6583317a2b28357fe7af3a873bc', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { key: '00db3e5649ccdc97062881ff7b3801fb1847c2db', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
                 [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
             } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
             const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-            return (hAsync(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-        })) : (hAsync("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, hAsync("td", { colSpan: this.store.config.state.columns.length, style: {
+            return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+        })) : (h("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h("td", { colSpan: this.store.config.state.columns.length, style: {
                 height: this.getBlockHeight(blockIndex) + 'px',
-            } })))))), this.showFooter && (hAsync("tfoot", { key: '0110d1266efc39669b4ed953acf6d9cd0519e0ca' }, hAsync(TableHeadFootRow, { key: '27c728a576ca2b4c54782914bc31726ec66a9b97', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
-            hAsync(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
+            } })))))), this.showFooter && (h("tfoot", { key: '15a1a79049ad87f63c87e2d905bc401a7d4bbb60' }, h(TableHeadFootRow, { key: 'ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
+            h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))))), !!this.blocks.length && (hAsync("nano-spinner", { key: '0486a33a182b6f6904efa9e2131d35a5c35c27ee', type: "circle", class: {
+        ]))))), !!this.blocks.length && (h("nano-spinner", { key: 'dd0041a5232a79a9f1882d2b9e5beebd79587a5d', type: "circle", class: {
                 [`${CSSNAMESPACE}__spinner`]: true,
                 [`${CSSNAMESPACE}__spinner--show`]: this._loading,
             } })))));
@@ -31592,10 +31652,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (hAsync(Host, { key: '24bcb9c2e705abc82a3a3c6f53d1a9ac4c38bd2a', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, hAsync("slot", { key: '50f175c4b6090ec769a4ea9d06cd23be521a01e3', onSlotchange: this.handleSlotChange }), hAsync("div", { key: '6413a83c5416cca23af4c0e856c7dc63b9d0fd6b', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, hAsync("div", { key: '99cd8748322e5aae2f04160359bbe9521914ca92', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: 'aea96e5f6c3a04be33309614166cde8809501bdd', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '1d35074667f546275cd81875cf49b5de5a9a144f', onSlotchange: this.handleSlotChange }), h("div", { key: '694a19141a36749d393e0db08ce48bfc490e7938', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '8b181e183dff1ab3b1a2253f693f6d62f6a504d2', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, hAsync("slot", { key: 'e7b096bfb90f18f0b7a440c6680e00d5bb547c4a', name: "content", onSlotchange: () => this.setLabel() }, this.content), hAsync("div", { key: '96cc982fde977a2c65bd877a7b1cd894c89e9bad', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: 'ba3d58a1cab421828b90a880019c334ddd15c40a', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: 'e254be92d3ca7ff1fc592c6f81a6b4de0185434a', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],